Dropzone.js uploads only two files when autoProcessQueue set to false

Question

I use Dropzone.js and I want it to upload the dropped not automatically but when the user clicks a button. So I set the autoProcessQueue option to false. When the button is clicked the processQueue() method is called. I would suppose that now the full queue is processed. But thats not the case. Only the number of files which is specified in the parallelUploads option will be uploaded. The standard value of parallelUploads seems to be 2. Which every click 2 files are processed and uploaded.

Do I have to set parallelUploads to an very high number, for now to solve this?

Here's my full JS code:

var myDropzone = new Dropzone("div#myId", {
  url: "http://www.torrentplease.com/dropzone.php",
  addRemoveLinks: true,
  thumbnailWidth: "80",
  thumbnailHeight: "80",
  dictCancelUpload: "Cancel",
  autoProcessQueue: false
});

myDropzone.on("drop", function(event) {
  $('.edit_tooltip .option_bar').animate({
    opacity: 1,
    top: "-5"
  });
});


$('.edit_tooltip .option_bar .button').click(function() {
  myDropzone.processQueue();
});

Answer 1

Add parallelUploads: 10(This is your max no)

Answer 2

There's a simple way to solve this which can be found here:

https://github.com/enyo/dropzone/issues/253#issuecomment-22184190

"If you want autoProcessQueue to be true after the first upload, then just listen to the processing event, and set this.options.autoProcessQueue = true; inside."

So just add

this.on("processing", function() {
    this.options.autoProcessQueue = true;
});

Answer 3

My solution is:

// init dropzone with auto process queue false
var adPhotosDropzone = new Dropzone("#dropzone", {
    autoProcessQueue: false,
    parallelUploads: 3
});

$(document).on('click', '#btnUpload', function () {
    // enable auto process queue after uploading started
    adPhotosDropzone.options.autoProcessQueue = true;
    // queue processing
    adPhotosDropzone.processQueue();
});

// disable queue auto processing on upload complete
adPhotosDropzone.on("queuecomplete", function() {
    adPhotosDropzone.options.autoProcessQueue = false;
});

Answer 4

Very late but maybe it will help someone.

I noticed when I placed maxFilesSize above parallerUploads it didn't worked.

So sequence for options should be .

.
.
parallelUploads: 20,    
maxFilesize: 2, 
maxFiles: 20,
.
.

Answer 5

Add overdrive two event like

processing -> Allow upload all file

queuecomplete -> Return to normal

    init: function () {

            this.on("queuecomplete", function () {
                this.options.autoProcessQueue = false;
            });

            this.on("processing", function () {
                this.options.autoProcessQueue = true;
            });

    };