Search code examples
javascriptdropzone.jsdropzone

How to invoke "done()" function in transformFile() after calling resizeImage()?


I have a problem with DropzoneJS. It's about the method transformFile. I use this method to calculate MD5 and to generate a presigned upload URL to S3.

It works great when I don't have to resize the image, but when I have to do it, then Dropzone doesn't proceed with upload - it only generates MD5 and presigned URL. I know I should invoke done() function but I'm not sure how to do this in my case.

Here is my implementation:

transformFile: async function transformFile(file, done) {
    if ((this.options.resizeWidth || this.options.resizeHeight) && file.type.match(/image.*/)) {
      //return this.resizeImage(file, this.options.resizeWidth, this.options.resizeHeight, this.options.resizeMethod, done);
      return this.resizeImage(file, this.options.resizeWidth, this.options.resizeHeight, this.options.resizeMethod, async function (result) {
         file.md5 = await calculateMD5(result);
         file.presign = await initUpload(file.name, file.type, file.md5);
         return result;
       });
    } else {
      file.md5 = await calculateMD5(file);
      file.presign = await initUpload(file.name, file.type, file.md5);
      return done(file);
    }
  },

and here the original one from Dropzone:

transformFile: function transformFile(file, done) {
    if ((this.options.resizeWidth || this.options.resizeHeight) && file.type.match(/image.*/)) {
      return this.resizeImage(file, this.options.resizeWidth, this.options.resizeHeight, this.options.resizeMethod, done);
    } else {
      return done(file);
    }
  },

I specifically have to do it in this method or later, but I'm pretty sure this is the last possible moment for me to generate MD5 and presigned URL. Any help will be appreciated.


Solution

  •  transformFile: async function transformFile(file, done) {
        if ((this.options.resizeWidth || this.options.resizeHeight) && file.type.match(/image.*/)) {
          return this.resizeImage(file, this.options.resizeWidth, this.options.resizeHeight, this.options.resizeMethod, async function (result) {
             file.md5 = await calculateMD5(result);
             file.presign = await initUpload(file.name, file.type, file.md5);
             done(result);
           });
        } else {
          file.md5 = await calculateMD5(file);
          file.presign = await initUpload(file.name, file.type, file.md5);
          return done(file);
        }
      },