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

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
}

}