Is there any possibility that the multiple files will be uploaded one by one using dropzone.js. The following is a custom dropzone config script.

Dropzone.options.myDropzone = {
                autoProcessQueue: false,
                parallelUploads: 10,
                addRemoveLinks:true,
                init: function () {
                    var submitButton = document.querySelector("#submit-all");
                    myDropzone = this; // closure
                    submitButton.addEventListener("click", function () {
                        if(myDropzone.getQueuedFiles().length === 0)
                        {
                            alert("Please drop or select file to upload !!!");
                        }
                        else{
                           myDropzone.processQueue(); // Tell Dropzone to process all queued files.
                        } 
                    });
                },
                url: "upload.php"
            };

Right now, it uploads all files at a time which are all in the process queue. Since, the upload file size will be bigger, all files have to upload one by one. please help to short out the same.

Is there any possibility that the multiple files will be uploaded one by one using dropzone.js. The following is a custom dropzone config script.

Dropzone.options.myDropzone = {
                autoProcessQueue: false,
                parallelUploads: 10,
                addRemoveLinks:true,
                init: function () {
                    var submitButton = document.querySelector("#submit-all");
                    myDropzone = this; // closure
                    submitButton.addEventListener("click", function () {
                        if(myDropzone.getQueuedFiles().length === 0)
                        {
                            alert("Please drop or select file to upload !!!");
                        }
                        else{
                           myDropzone.processQueue(); // Tell Dropzone to process all queued files.
                        } 
                    });
                },
                url: "upload.php"
            };

Right now, it uploads all files at a time which are all in the process queue. Since, the upload file size will be bigger, all files have to upload one by one. please help to short out the same.

• javascript
• dropzone.js

• 1 Try setting parallelUploads: 1, from 10; – itzmukeshy7 Commented Aug 17, 2016 at 10:37
• @itzmukeshy7 : No, if the parallelUploads is set as 1 from 10. it will allow to select only one file to upload. Actually, that is not a requirement. if more than one file is selected to upload, it has to process the file one by one in the queue. Not all at a time. – user3113732 Commented Aug 17, 2016 at 10:58
• sorry @itzmukeshy7. I misunderstood the thing. Now i set parallelUploads=1. then also it's not working as expected. – user3113732 Commented Aug 17, 2016 at 11:47

2 Answers 2

I used this for uploading files one by one. Hope this helps. If you want the plete code according to your functions let me know.

startUpload() is called when customer confirms upload of files.

    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("#uploadModal", { 
        url: "upload.php", 
        paramName: "file_upload",
        maxFilesize: 1024, 
        maxFiles: 200,
        autoProcessQueue: false
    });

    function startUpload(){
        for (var i = 0; i < myDropzone.getAcceptedFiles().length; i++) {
            myDropzone.processFile(myDropzone.getAcceptedFiles()[i]);
        }
    }

    myDropzone.on('success', function(file, result) {
        try {
            result = JSON.parse(result)
            if (!result.error) {
                if(myDropzone.getQueuedFiles().length === 0 && myDropzone.getUploadingFiles().length === 0){
                    $("#uploadModal"). modal('hide');
                    myDropzone.removeAllFiles(true) ;
                }
            }
            //TODO - 
        } catch (e) {
            //TODO -
        }
    });

You need to set autoProcessQueue to true and parallelUploads to 1.

Setting autoProcessQueue to true tells dropzone to automatically process the queue. Setting parallelUploads to 1 tells dropzone to only upload one file at a time from the queue.

Dropzone.options.myDropzone = {
            autoProcessQueue: true,
            parallelUploads: 1,
            addRemoveLinks:true,
            init: function () {
                var submitButton = document.querySelector("#submit-all");
                myDropzone = this; // closure
                submitButton.addEventListener("click", function () {
                    if(myDropzone.getQueuedFiles().length === 0)
                    {
                        alert("Please drop or select file to upload !!!");
                    }
                    else{
                       myDropzone.processQueue(); // Tell Dropzone to process all queued files.
                    } 
                });
            },
            url: "upload.php"
        };