Dropzone client side resize with file upload to AWS pre-signed url

[helzich]

I have not had much luck on https://stackoverflow.com/q/57418410/4556546, so trying here again.

I implemented image file upload to an AWS s3 bucket with dropzone. It creates a pre-signed url and ultimately sends the image file to s3. I cannot get this to work in combination with the client side image resizing dropzone provides.

For s3 upload to work properly, I had to override sending, as explained here #590. Otherwise, it would send form data and I would get the image wrapped in ------WebKitFormBoundary...

This, from the link above is working:

  sending: function(file, xhr) {
    var _send = xhr.send;
    xhr.send = function() {
      _send.call(xhr, file);
    };
  }

However, I get problems when I try to combine the above approach with dropzone's client side image resize. As per the dropzone documentation, I specified:

  resizeWidth: 384,
  resizeHeight: 384,
  resizeMethod: 'contain',
  resizeQuality: 1.0,

Debugging the code, the resize functionality is called with the above settings. However, the file that arrives at sending is still the original file which has not been resized. I could not make out where the resized image would be stored.

I tried to change sending as follows:

    sending (file, xhr) {
      var _send = xhr.send;
    
      this.options.transformFile.call(this, file, function (done) {
        console.log('done', done)
        xhr.send = function () {
          _send.call(xhr, done);
        }
      }

However, the result from the call to transformFile is a blob and, while the result looks resized, it is also wrapped as a form.

In summary, can I get the combination of resize with plain image upload to work, somehow? Is the resized image stored in a suitable place? Can my override of sending be changed to get this to function?

[pkl]

@helzich Did you solve this? I have the same problem.

[helzich]

@pkl, no, I have not, found a solution. I parked the problem for now. In case you find out more, please share :-)

[pkl]

@helzich I will :)

[pkl]

@helzich

This worked for me:

xhr.send = formData => {
  // get the resized file in formData.get("file") vs file
  _send.call(xhr, formData.get("file"));
 };

[helzich]

@pkl, many thanks for sharing! This works for me too.

In case you want to answer the same on https://stackoverflow.com/q/57418410/4556546 I will accept and upvote there, too.

Thanks again!

[syrsly]

You could also override the process queue and implementing it in the thumbnail function instead:
this.on('thumbnail', function(file, thumb) { file.thumbnail = thumb; this.processQueue(); });

[helzich]

@joshmaines Thank you!

In the meantime, Andrei Gherghe answered on https://stackoverflow.com/a/59121684/4556546, posting his analysis here for reference:

...
After messing with logs for a while it hit me, it was a race condition! The function sending returned before xhr got modified. Specifically, in createThumbnail there is a FileReader that executes async. Your result was resized and wrapped because the xhr did not get changed at all, so it just executed the normal code path.

Thus, just calling the resizing function in xhr.send does the trick! 🎉🥳

Here is my working code:

sending: function(file, xhr) {
    var _send = xhr.send;
    var _this = this
    xhr.send = function () {
        _this.resizeImage(file, 500, 500, 'contain', function (done) {
            _send.call(xhr, done);
        })
    }
}

[syrsly]

This seems to be a fixed issue now. You should mark as closed. :)