Upload multiple files one by one using DropZone.js

Question

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.

Answer 1

I used this for uploading files one by one. Hope this helps. If you want the complete 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 -
        }
    });

Answer 2

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