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();
});

This is because `parallelUploads` defaults to 2 if not set in your options. — mcometa, Dec 15 '13 at 09:05

score 55 · Answer 1 · answered Sep 04 '13 at 08:27

55

Add parallelUploads: 10(This is your max no)

answered Sep 04 '13 at 08:27

Venom

1,076
1
11
23

Thank you very much! I spent half a day on solving this problem, and finally your answer helps me. – Artur Keyan Mar 27 '14 at 20:44
4

To be clear, this approach requires that the ```parallelUploads``` is set equal to or larger than ```maxFiles```, otherwise if a user drops more than ```paralleluploads``` files, the last few may not get uploaded. Bianka's answer below seems more 'correct' in the sense that it allows ```parallelUploads``` to function independently of ```maxFiles```, in the way it was designed. – tohster Feb 11 '15 at 01:41
3

Not sure it's the best solution. Not if we want more than 10 files to be uploaded. – Pete_Gore Sep 11 '15 at 12:07

score 37 · Accepted Answer · answered Feb 19 '14 at 18:23

37

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;
});

answered Feb 19 '14 at 18:23

Bianka M.

396
3
4

Because I was using this from an external process to start the upload, here's what my code looked like: myDropzone.options.autoProcessQueue = true; I had the parraleleupload setting = 1, and this caused each file to upload 1 by 1. THANKS for the correct solution. – Andy Aug 02 '15 at 16:14
This indeed makes that the files are uploaded sequentially, but now the action url is called for each individual file! In my example, with this solution, I receive as many emails as files. and this is not what I want! I would like that the files are uploaded sequentially and only after that, the action url is called. is it possible? – gota May 17 '17 at 11:39

score 23 · Answer 3 · answered May 19 '15 at 07:49

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;
});

This worked for me, as I have an event that initiates the upload. It seems that setting `autoProcessQueue=true` just before `processQueue()` fixed the problem. — Daniel Kim, Aug 07 '20 at 04:02

score 7 · Answer 4 · answered Jan 25 '17 at 09:57

7

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,
.
.

answered Jan 25 '17 at 09:57

m.qayyum

401
2
15
44

maxFilesize is [the maximum filesize (in bytes) that is allowed to be uploade](https://docs.dropzone.dev/configuration/basics/configuration-options) . It is not related to the topic here. – Fumisky Wells Jun 26 '23 at 01:22

score 4 · Answer 5 · answered Oct 13 '16 at 11:46

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;
            });

    };

score 3 · Answer 6 · answered Jul 04 '19 at 16:29

i used this dropzone with option (autoProcessQueue:false) and it does only upload 2 files instead of my whole files. And i found this workaround in the oligoil's answer at the git's issue

The Idea is very simple (bcs we want to upload the files one by one, remember the option! :D ).

It upload multiple but limited to 1, after one file is uploaded it trigger the next Queue!

Hope it help someone!

here's my code using that idea ( since i have 2 forms to upload, after all the images is uploaded it will submitting the other forms )

Dropzone.options.dropzoneForm = {
        paramName: "file", // The name that will be used to transfer the file
        autoProcessQueue: false,
        addRemoveLinks:true,
        parallelUploads : 1,
        maxFiles : 50,
        autoProcessQueue : false,
        autoQueue : true,
        dictDefaultMessage: "<strong>Drop files here or click to upload. </strong>",
        init: function () {
            ....

            this.on("complete", function (file) {
                if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                    console.log("END ", this.getQueuedFiles().length);
                }
                else {
                    Dropzone.forElement("#dropzoneForm").processQueue();
                }
            });
        }
    };

score 2 · Answer 7 · 2020-05-08T15:56:09.153

If you dont want to set maxFiles (default no limit) and use parallelUploads with the value you want. Read this!

I have solved the problem behaviour by setting

autoQueue: false,
autoProcessQueue: true,

Then when I want to upload the files I just add them to the queue with:

myDrop.enqueueFile(file)

But, this method just accept one file, for multiple files I'am using:

myDrop.on("addedfiles", function(files){
 //wait confirmation, or do some processing with the files, then:

 files.forEach(function(file){
    myDrop.enqueueFile(file)
 })
}

Note that "addedfiles" event it's not in the documentation yet. I captures all files dragged into the dropzone or added by the click event.

This is good because if you are using "sending" event to add POST data, or "parallelUploads" the sample code works fine and don't mess with the next files. I am using Sweet Alert 2 to ask for some tags before uploading the images.

score 0 · Answer 8 · answered Oct 30 '13 at 17:55

I think that you can allow uploadMultiple and change dropzone.js file.

First, allow uploadMultiple Next, change this line code into dropzone.js:

return this.processFiles(queuedFiles.slice(0, parallelUploads - processingLength));

for

return this.processFiles(queuedFiles.slice(0, queuedFiles.length));

score 0 · Answer 9 · answered Jun 17 '17 at 10:34

A bit late, but I wasn't happy with the other answers, so here's mine.

Changing autoProcessingQueue (even temporarily) after clicking send mean that if you add another file to the dropzone while other are still queued, it will get uploaded without you having to press send again, which I didn't want. And I didn't want to use a setTimeout or a busyloop either. So here's how to do it without either :

Modify the dropzone.js file. First, in the Dropzone function, you need to add a second file array to store the queue when send is pressed :

function Dropzone(element, options) {
  ...
  this.files = [];
  this.files2 = [];

Then, save the files to it when send is clicked by modifying processQueue

Dropzone.prototype.processQueue = function() {
  this.files2 = this.getQueuedFiles();
  ...

Finally, edit the _finished function so that when a file is done uploading, another file get sent if there was still remaining ones in the queue when send was pressed:

Dropzone.prototype._finished = function(files, responseText, e) {
  var file, _i, _len;
  for (_i = 0, _len = files.length; _i < _len; _i++) {
    file = files[_i];
    file.status = Dropzone.SUCCESS;
    this.emit("success", file, responseText, e);
    this.emit("complete", file);
    this.files2 = this.files2.filter(function(e) { return e.status == "queued" }); // Remove the files that are finished or already being uploaded
  }
  if (this.options.uploadMultiple) {
    this.emit("successmultiple", files, responseText, e);
    this.emit("completemultiple", files);
  }
  if (this.options.autoProcessQueue) {
    return this.processQueue();
  }
  else {
      if (typeof this.files2 != "undefined" && this.files2.length > 0) {
          this.processFiles(this.files2.slice(0,1)); // process the next file if there's one
      }
  }
};

score -1 · Answer 10 · answered Jan 17 '14 at 10:41

This solved it for me, without changing any dropzone.js code or voiding the parallelUploads setting.

$('#submit').click(function(e){
  e.preventDefault();

  function tryQueue(){
    var numQueued=dz.getQueuedFiles().length;
    var numFiles=numQueued+dz.getUploadingFiles().length;
    if(numQueued>0){
      dz.processQueue();
    }
    if(numFiles>0){
      setTimeout(tryQueue,1000);
    }
    else window.location='/'; //redirect when finished
  }
  tryQueue();
});

This assumes that dz is the dropzone instance. It works by invoking processQueue until all have been uploaded. The logic in processQueue takes care of returning if nothing needs to be done so no harm in the polling.

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

10 Answers10