Dynamically changing postUrl config parameter

[paulafeleggakis]

I am using react dropzone component https://github.com/felixrieseberg/React-Dropzone-Component to facilitate the dragging and dropping of files onto a site.

I want each file that gets dropped onto the dropzone to get posted to a different url (AWS Pre-Signed URL). Essentially I want the the component config parameter 'postUrl' to dynamically change as this pre-signed URL changes.

I currently have the following component configuration set

class Uploader extends React.Component {
  constructor(props){
   super(props);
   this.dropzone = 'null'
  }

  config = () => (
    {
      iconFiletypes: ['.jpg', '.png', '.gif'],
      showFiletypeIcon: true,
      postUrl: this.dropzone.options.url || 'no-url'
    }
  );

  eventHandlers = () => (
    {
      processing: function(file) {
      },
      init: dz => this.dropzone = dz,
    }
  );

  djsConfig = (requestID=this.props.requestId) => (
    {
      addRemoveLinks: false,
      acceptedFiles: "image/jpeg,image/png,image/gif",
      autoProcessQueue: true,
      init: function () {
        this.on("processing", async (file) => {
          const presigned_url = await uploadUrl(file, requestID, () => {})
          this.options.url = presigned_url;
        });
      }
    }
  );
}

I get the following error when I load the page/component:

Uncaught TypeError: Cannot read property 'url' of undefined

Updating the options.url on the Dropzone object via djsConfig when a file is processed doesn't get the chance to update the postUrl: this.dropzone.options.url as I would like?

[shabanBabar]

in the event handler there is an addedfile put your function after it like addedfile: yourfunc the function receives the first parameter as file and then upon your file you can change the state of the url in reactjs

[hardik-ebiz]

+1