Dropzone JS - process files after all of them loaded?

I need to make dropzone to compress images after they all load. I tried to use queuecomplete but I kept getting errors. I don't know where exactly to put that. I put it instead of transformFile but my compressor stopped working.

Can you help please?

Dropzone.options.myDropzone = {
  url: " ",
  autoProcessQueue: true,
  parallelUploads: 10,
  transformFile: function(file, done) { // i tried queuecomplete HERE
    const imageCompressor = new ImageCompressor();
    imageCompressor.compress(file, {
      checkOrientation: true,
      maxWidth: 8192,
      maxHeight: 8192,
      quality: 0.69,
    }).then((result) => {
      done(result)
    }).catch((err) => {
      throw err
    })
  }
}

Solution

So here is resize option in Dropzone. So If you mark createImageThumbnails : false then resize function will not work. but if you mark it as true it will work accordingly. The best thing is that its already resizing image and creating thumbnails for you because by default createImageThumbnails : true .

var options = {
  createImageThumbnails: false,
  url: " ",
  autoProcessQueue: true,
  parallelUploads: 10,
  resize: function(file) {
        var info, srcRatio, trgRatio;
        info = {
          srcX: 0,
          srcY: 0,
          srcWidth: file.width,
          srcHeight: file.height
        };
        srcRatio = file.width / file.height;
        info.optWidth = this.options.thumbnailWidth;
        info.optHeight = this.options.thumbnailHeight;
        if ((info.optWidth == null) && (info.optHeight == null)) {
          info.optWidth = info.srcWidth;
          info.optHeight = info.srcHeight;
        } else if (info.optWidth == null) {
          info.optWidth = srcRatio * info.optHeight;
        } else if (info.optHeight == null) {
          info.optHeight = (1 / srcRatio) * info.optWidth;
        }
        trgRatio = info.optWidth / info.optHeight;
        if (file.height < info.optHeight || file.width < info.optWidth) {
          info.trgHeight = info.srcHeight;
          info.trgWidth = info.srcWidth;
        } else {
          if (srcRatio > trgRatio) {
            info.srcHeight = file.height;
            info.srcWidth = info.srcHeight * trgRatio;
          } else {
            info.srcWidth = file.width;
            info.srcHeight = info.srcWidth / trgRatio;
          }
        }
        info.srcX = (file.width - info.srcWidth) / 2;
        info.srcY = (file.height - info.srcHeight) / 2;
        return info;
      }
};

I am adding both codes and you can debug the code. hope it will help you out. You can also add the below option for thumbnails.

      maxThumbnailFilesize: 10,
      thumbnailWidth: 120,
      thumbnailHeight: 120,

var options = {
  createImageThumbnails: false,
  url: " ",
  autoProcessQueue: true,
  parallelUploads: 10,
  resize: function(file) {
        var info, srcRatio, trgRatio;
        info = {
          srcX: 0,
          srcY: 0,
          srcWidth: file.width,
          srcHeight: file.height
        };
        srcRatio = file.width / file.height;
        info.optWidth = this.options.thumbnailWidth;
        info.optHeight = this.options.thumbnailHeight;
        if ((info.optWidth == null) && (info.optHeight == null)) {
          info.optWidth = info.srcWidth;
          info.optHeight = info.srcHeight;
        } else if (info.optWidth == null) {
          info.optWidth = srcRatio * info.optHeight;
        } else if (info.optHeight == null) {
          info.optHeight = (1 / srcRatio) * info.optWidth;
        }
        trgRatio = info.optWidth / info.optHeight;
        if (file.height < info.optHeight || file.width < info.optWidth) {
          info.trgHeight = info.srcHeight;
          info.trgWidth = info.srcWidth;
        } else {
          if (srcRatio > trgRatio) {
            info.srcHeight = file.height;
            info.srcWidth = info.srcHeight * trgRatio;
          } else {
            info.srcWidth = file.width;
            info.srcHeight = info.srcWidth / trgRatio;
          }
        }
        info.srcX = (file.width - info.srcWidth) / 2;
        info.srcY = (file.height - info.srcHeight) / 2;
        return info;
      }
};

$( document ).ready(function() {
        $("#mydropzone").addClass("dropzone");
        $("#mydropzonewithresize").addClass("dropzone");
        var myAwesomeDropzone = new Dropzone("#mydropzone",options);
        options.createImageThumbnails=true;
        var mydropzonewithresize = new Dropzone("#mydropzonewithresize",options);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<p>
  This is the most minimal example of Dropzone. The upload in this example  doesn't work,
</p>
<div id="mydropzone"></div>
<div id="mydropzonewithresize"></div>