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.

Menchaca

Try setting parallelUploads: 1, from 10; – Rosecan

@Rosecan : 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. – Menchaca

sorry @itzmukeshy7. I misunderstood the thing. Now i set parallelUploads=1. then also it's not working as expected. – Menchaca

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

Transcendence

All you really need to do is set autoProcessQueue to true and parallelUploads to 1. That will achieve the same thing. – Lipoprotein

Thanks - this is exactly what I needed as well for a manually triggered "one by one" upload! Everybody who points to "simply using autoProcessQueue with parallelUploads" didn't understand the Use Case behind the question. – Orwin

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

Lipoprotein