how to read list of files queued for dropzone and upload them in order

Question

I am uploading the multiple number of images using (drag and drop)dropzone.js

Here I kept the autoProcessQueue to false to make custom uploading.

Now I am looking for how can I get the list of queue that I've selected to upload. The reason is that I need to upload the files one after the other so that the order is maintained. I can keep the option parallelUploads to 1 so that the files get upload one after the other but here the issue is that the second file is not waiting for the response of the previous file.

So mean while during the process in the server of upload the second is getting processed and if it is having lesser size than the first it is getting uploaded first before the previous file.

Any answer for this please..?

Answer 1

I've been working recently with dropzonejs and SlickGrid and I ran into the file ordering challenge as well as the events firing before all the files were uploaded. When you use the defaults it will separate all the uploads, so to allow for multiple files you need to set the uploadMultiple parameter. You can control how many parallel uploads you support by setting the paralellUploads parameter. I seem to recall it defaults to two. The trick is to wait for ALL the uploads to complete before processing the responses. I realize you are looking to retain the order of the files to be uploaded but I really think you want to handle the responses in order. Forcing them to upload in order eliminates any parallel uploading advantages.

I added two handlers one to save the responses as they complete (each block of parallel uploads produces one of these

myDropzone.on("successmultiple", function(file,response) { 
  save_responses(response); 
});

and one to process them all when done.

myDropzone.on("completemultiple", function() {
  if (this.getQueuedFiles().length == 0 && 
      this.getUploadingFiles().length == 0) {
    process_responses(this.getAcceptedFiles());
  }
});

if you suspect the order of the files isn't right you can always check the event.dataTransfer.files array