Dropzone JS - process files after all of them loaded?

Question

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
    })
  }
}

Answer 1

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>

Answer 2

try

let number_of_files = 0;
//how many files loaded already
let filearr = []
$(function() {
      // Now that the DOM is fully loaded, create the dropzone, and setup the
      // event listeners
      var myDropzone = new Dropzone("#my-dropzone");
      myDropzone.on("success", function(file) {
        number_of_files++
filearr.push(file)
      });
    })
$(function() {
      // Now that the DOM is fully loaded, create the dropzone, and setup the
      // event listeners
      var myDropzone = new Dropzone("#my-dropzone");
      myDropzone.on("success", function(file) {
        number_of_files++
filearr.push(file)
      });
    })
//as many as you wish (or do it in a for loop)
//suppose the number of files you need is x
let x = 10
function flag() {
if(number_of_files == x) {
setTimeout(flag, 100) //checks if complete every 100 milliseconds 
} else {
//compress files here
}

}