Dropzone.js uploads only two files when autoProcessQueue set to false
Solution 1
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;
});
Solution 2
Add parallelUploads: 10(This is your max no)
Solution 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;
});
Solution 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,
.
.
Solution 5
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();
}
});
}
};
Juuro
Updated on July 09, 2022Comments
-
Juuro almost 2 years
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 tofalse
. When the button is clicked theprocessQueue()
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 theparallelUploads
option will be uploaded. The standard value ofparallelUploads
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(); });
-
Artur Keyan about 10 yearsThank you very much! I spent half a day on solving this problem, and finally your answer helps me.
-
tohster over 9 yearsTo be clear, this approach requires that the
parallelUploads
is set equal to or larger thanmaxFiles
, otherwise if a user drops more thanparalleluploads
files, the last few may not get uploaded. Bianka's answer below seems more 'correct' in the sense that it allowsparallelUploads
to function independently ofmaxFiles
, in the way it was designed. -
Andy almost 9 yearsBecause 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.
-
Pete_Gore over 8 yearsNot sure it's the best solution. Not if we want more than 10 files to be uploaded.
-
gota about 7 yearsThis 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?
-
Daniel Kim almost 4 yearsThis worked for me, as I have an event that initiates the upload. It seems that setting
autoProcessQueue=true
just beforeprocessQueue()
fixed the problem.