dropzone js - how to do something after ALL files are uploaded

Question

I am using dropzone js for my drag-drop file upload solution  I am stuck at something where I need to call a function after all the files are uploaded  In this case   Dropzone options filedrop         maxFilesize  4096      init  function              this on  complete   function  file                doSomething                           doSomething   will be called for each file that has been uploaded  How can I call a function after all the files are uploaded

User · Answer

I up-voted you as your method is simple  I did make only a couple of slight amends as sometimes the event fires even though there are no bytes to send - On my machine it did it when I clicked the remove button on a file   myDropzone on  totaluploadprogress   function totalPercentage  totalBytesToBeSent  totalBytesSent                if totalPercentage  gt   100  amp  amp  totalBytesSent                       All done  Call func here

User · Answer

I was trying to work with that solutions but it doesn t work  But later I was realize that the function it wasn t declared so I watch in to the dropzone com page and take the example to call events  So finally work on my site  For those like me who don t understand JavaScript very well  I leave you the example    lt script type  text javascript  src   js dropzone js  gt  lt  script gt   lt script type  text javascript  gt     This example uses jQuery so it creates the Dropzone  only when the DOM has    loaded      Disabling autoDiscover  otherwise Dropzone will try to attach twice  Dropzone autoDiscover   false     or disable for specific dropzone     Dropzone options myDropzone   false     function          Now that the DOM is fully loaded  create the dropzone  and setup the      event listeners   var myDropzone   new Dropzone   dropzone       myDropzone on  queuecomplete   function file  res          if  myDropzone files 0  status    Dropzone SUCCESS               alert  yea baby            else             alert  cry baby                        lt  script gt

User · Answer

In addition to  enyo s answer in checking for files that are still uploading or in the queue  I also created a new function in dropzone js to check for any files in an ERROR state  ie bad file type  size  etc    Dropzone prototype getErroredFiles   function          var file   i   len   ref   results       ref   this files       results           for   i   0   len    ref length   i  lt   len   i              file    ref  i           if  file status     Dropzone ERROR                 results push file                       return  results       And thus  the check would become     if  this getUploadingFiles   length     0  amp  amp  this getQueuedFiles   length     0  amp  amp  this getErroredFiles   length     0        doSomething

User · Answer

Just use queuecomplete that s what its there for and its so so simple  Check the docs http   www dropzonejs com      queuecomplete    Called when all files in the queue finished uploading          this on  queuecomplete   function  file              alert  All files have uploaded

User · Answer

There is probably a way  or three  to do this    however  I see one issue with your goal  how do you know when all the files have been uploaded  To rephrase in a way that makes more sense    how do you know what  all  means  According to the documentation  init gets called at the initialization of the Dropzone itself  and then you set up the complete event handler to do something when each file that s uploaded is complete  But  what mechanism is the user given to allow the program to know when he s dropped all the files he s intended to drop  If you are assuming that he she will do a batch drop  i e   drop onto the Dropzone 2-whatever number of files  at once  in one drop action   then the following code could possibly should work   Dropzone options filedrop         maxFilesize  4096      init  function              var totalFiles   0              completeFiles   0          this on  addedfile   function  file                totalFiles    1                      this on  removed file   function  file                totalFiles -  1                      this on  complete   function  file                completeFiles    1              if  completeFiles     totalFiles                    doSomething                                         Basically  you watch any time someone adds removes files from the Dropzone  and keep a count in closure variables  Then  when each file download is complete  you increment the completeFiles progress counter var  and see if it now equals the totalCount you d been watching and updating as the user placed things in the Dropzone   Note  never used the plug-in JS lib   so this is best guess as to what you could do to get what you want

User · Answer

EDIT  There is now a queuecomplete event that you can use for exactly that purpose     Previous answer   Paul B  s answer works  but an easier way to do so  is by checking if there are still files in the queue or uploading whenever a file completes  This way you don t have to keep track of the files yourself   Dropzone options filedrop       init  function          this on  complete   function  file          if  this getUploadingFiles   length     0  amp  amp  this getQueuedFiles   length     0            doSomething

User · Answer

A  queuecomplete  event has been added   See Issue 317

User · Answer

The accepted answer is not necessarily correct  queuecomplete will be called even when the selected file is larger than the max file size   The proper event to use is successmultiple or completemultiple   Reference  http   www dropzonejs com  event-successmultiple

User · Answer

this on  totaluploadprogress   function totalBytes  totalBytesSent                         if totalBytes    100                               all done  call func here

[javascript] dropzone.js - how to do something after ALL files are uploaded

Examples related to javascript

Examples related to jquery

Examples related to dropzone.js