dropzone js onclick submit file upload

Question

upload all files with a single button click.
HTML:

Submit all files         


        

Answer 1

Here how i implement delayed uploading (initiated by click on any button, for an example):

Dropzone implementation

var count = 0;
var addedFilesHash = {};
var myDropzone = new Dropzone("#file_upload-form", {
    paramName: "file", // The name that will be used to transfer the file
    addRemoveLinks: true,
    maxFilesize: 5, // MB
    parallelUploads: 5,
    uploadMultiple: true,
    acceptedFiles: "image/*,.xlsx,.xls,.pdf,.doc,.docx",
    maxFiles: 10,
    init: function() {
        this.on("removedfile", function (file) {
            // delete from our dict removed file
            delete addedFilesHash[file];
        });
    },
    accept: function(file, done) {
        var _id = count++;
        file._id = _id;
        addedFilesHash[_id] = done;
    }
});

Somewhere else

    // get all uploaded files in array
    var addedFiles = Object.keys(addedFilesHash);
    // iterate them
    for (var i = 0; i< addedFiles.length; i++) {
        // get file obj
        var addedFile = addedFiles[i];
        // get done function
        var doneFile = addedFilesHash[addedFile];
        // call done function to upload file to server
        doneFile();
    }

We override accept and removedFile functions. In accept function we collect file objects and done functions in dict where key is file and value is done function. Later in time, when we are ready to upload added files, we are iterating all done functions for all files in dict addedFilesHash which launches upload progress with progress bar and etc.