Upload url as function about react-dropzone-component HOT 7 CLOSED

I found some solution but I'm not able do what I need. The function is not async and I need to generate url on server.

from react-dropzone-component.

Hey, Dropzone actually supports that feature: https://github.com/enyo/dropzone/wiki/Set-URL-dynamically

from react-dropzone-component.

Hi, this is not what I need. Problem is that generating the URL is async event and can't return the value. I need callback or the promise support. I do some hack and solve this by modifying function done(error, url) in accept callback in dropzone.

If you would like to know more, let me know :)

M.

from react-dropzone-component.

Hm, sorry about that - I don't think we can do anything about that though, given that we're just wrappen Dropzone here. Have you considered reporting your issue over at Dropzone?

from react-dropzone-component.

I made some dirty hacks and now I have problem with AWS S3 :)

Sending issue to the Dropzone sounds like good idea...

M.

from react-dropzone-component.

Running into the same issue. Has anyone figured out a good solution?

from react-dropzone-component.

This is what I ended up doing.

const dropZoneConfig = {
  autoProcessQueue: false,
  init: function () {

    this.on('addedfile', function (file) {

      let _this = this;
      fetch(`${Config.apiBase}/images/cache/presign`).then(function (response) {
        response.json().then(function (json) {
          // Add formdata to param options
          // https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L1222
          Object.assign(_this.options.params, json.fields);

          // Update url to s3 endpoint
          _this.options.url = json.url;

          _this.processQueue();
        });
      });
    });
  },
};

By setting autoProcessQueue to false, you can start the upload to s3 process after you fetch the presign data.

And a somewhat liberal CORS policy just to get the ball rolling.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

from react-dropzone-component.