Upload Multiple Files One By One Using DropZone.js

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 = {

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

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