1

According to the Dropzone.js Documentation the queuecomplete event is "Called when all files in the queue finish uploading.".

One would also assume this is true given the answers for this question. dropzone.js - how to do something after ALL files are uploaded However the solutions given don't behave as expected for me.

So I have a Dropzone that accepts multiple files and when I queue up more than one file and they have been uploaded - this event seems to be fired multiple times. What is also strange is that the number of time the event is trigger doesn't even correspond to the number of files in the queue.

So my problem is, I need a way of executing some javascript when the queue is finished uploading, I want to do this once (not N times) I would also be useful to know if any of the files in the queue failed or if they were all successful

HTML

<button id="but"> 
  Process Queue
</button>

<div  id="image-uploader" style="--removed--">

</div>

JS

$(function  (){
    var el = document.getElementById("image-uploader");
  var config = {
                    url: 'http://www.dropzonejs.com/upload',
            autoProcessQueue: true,
            uploadMultiple: true,
            parallelUploads: 15,
            maxFiles: 15,
            acceptedFiles: "image/*",
            init: function () {
                this.on("queuecomplete", function () {
                    alert("I Think I should only see this once.");
                });

            }
        };

    var dropZone = new Dropzone(el, config);

    $('#but').click(function(){dropZone.processQueue();})

});

I have put together a fiddle demonstrating this.

Community
  • 1
  • 1
SimonGates
  • 5,961
  • 4
  • 40
  • 52
  • works for me. fiddle only alerts once. might as well plug my plugin tho... if you wan tot ry somehting a little simpler for drag and drop file uploads check out my fileUpload plugin: https://github.com/Pamblam/fileUpload – Robert Parham Sep 19 '16 at 15:29
  • How many files did you try? Sorry I should've have mentioned this only occurs when you queue more than one file. – SimonGates Sep 19 '16 at 15:30
  • Possible duplicate of [dropzone.js - how to do something after ALL files are uploaded](http://stackoverflow.com/questions/16998420/dropzone-js-how-to-do-something-after-all-files-are-uploaded) – Robert Parham Sep 19 '16 at 15:34
  • @RobertParham the two solutions given in the top two answers of that question do not work as expected in my scenario. – SimonGates Sep 19 '16 at 15:37
  • I looked at the dropzone docs and wasn't able to figure it out myself. This doesn't answer your question exactly but it might be helpful. This fiddle does exactly the same thing, but it doesn't use Dropzone: http://jsfiddle.net/mmkq76aL/ Good luck. – Robert Parham Sep 19 '16 at 17:13
  • @SimonGates Your JSFiddle alerted for me 3 times when I uploaded two images. By setting `uploadMultiple: false,` it did fix the problem for me and will only alert one time. Not a proper answer but it is a workaround. – Hank Sep 24 '16 at 12:39
  • This is still an open issue: https://github.com/enyo/dropzone/issues/578 – Neo May 14 '18 at 20:01

1 Answers1

1

Five years on the documentation is still fairly sparse on this issue, but the question is still relevant so:

In the init function of your dropzone options you can do:

this.on('queuecomplete', function() {
  if(this.getActiveFiles().length == 0) {
    // Files are done
  }
});

You can get the rejected files with: .getRejectedFiles().

You may also want to respond to the .on('addedfile') event, since the user may drop in more files.

You can get all files in a dropzone by calling .files.

You can find these methods in the source here.

Ford Davis
  • 343
  • 4
  • 13