Search code examples
dropzone.jschunkingmultifile-uploader

How to set up Dropzone.js to upload multiple and upload in chunks at the same time?


I'm trying to set up Dropzone.js to handle multiple files at the same time, but also upload each one in 1mb chunks. I can't seem to find the right DZ configuration for this.

When I add "uploadMultiple: true" to my working chunking implementation of DZ, Chrome throws this error: "Uncaught Error: You cannot set both: uploadMultiple and chunking."


Solution

  • The Problem: "autoProcessQueue" was set to "false" because I only wanted to process when the user hits a "submit" button. Even with "uploadMultiple" not set to true, Dropzone will upload more than one file (presumably consecutively rather than simultaneously) as long as the queue is auto-processed.

    The Solution: Dropzone.js calls "chunksUploaded" once all the chunks for a file are uploaded. After the first file successfully uploads all of its chunks, reset the "autoProcessQueue" option to "true." After "queueComplete," set it back to "false" in preparation for the next upload.

    See the answer here to understand the chunksUploaded callback, in the context of using it to concatenate chunks following upload: How to concatenate chunked file uploads from Dropzone.js with PHP?

    See the end of this thread for turning on/off autoProcessQueue: https://github.com/enyo/dropzone/issues/462

    Javascript sample snippet:

    ( I stripped out all Dropzone and Ajax options to highlight the relevant parts )

    var myDropzone = new Dropzone(target, {
      chunksUploaded: function(file, done) {
        // ajax below posts to a script that merges the uploaded chunks of the current file
        $.ajax({
            success: function (data) {
              myDropzone.options.autoProcessQueue = true;
              done();
            }
         });
      }
    });
    
    myDropzone.on("queuecomplete", function() {
      myDropzone.options.autoProcessQueue = false;
    });