Trigger Multiple Dropzone Upload in a single button

Question

I have a simple function that a user can submit a details of his/her past and current projects, and I am using dropzone so users can upload related documents to their project. So basically, they can add many projects as they like

Currently, I set to autoProcessQueue: true, the dropzone, so when user drop a file, it will be automatically uploaded.

var dynamicDropzone = new Dropzone(element, {
        autoProcessQueue: true,
        addRemoveLinks: true,
        parallelUploads: 1,
        maxFilesize: 5,
        acceptedFiles: 'image/*,application/pdf',
        dictDefaultMessage: '<div class="dz-default dz-message"></div>',
        url: tempURL + 'upload.php',
        params: {
            'userID': current_user_id,
        },

What I want is all the dropzone instance will be start uploading all files in a 1 single button trigger.

My issue is since users can add project dynamically, the dropzones in not triggering upload when click the button

$("#button").click(function (e) {
    e.preventDefault();
    dynamicDropzone.processQueue();
});

button type="submit" id="button" class="btn btn-primary">Submit</button>

score 4 · Accepted Answer · edited Jul 17 '19 at 17:45

4

You need to keep autoProcessQueue: false so that Dropzone will not automatically upload the file when you drop it.

And then on your button click, you need to tell the Dropzone instance(s) to process the queue like this:

$("#button").click(function (e) {
    e.preventDefault();
    dynamicDropzone1.processQueue(); // process dropzone instance 1
    dynamicDropzone2.processQueue(); // process dropzone instance 2
});

There is more detailed answer already available here: https://stackoverflow.com/a/46732882/9354303

edited Jul 17 '19 at 17:45

kulkhare

37
1
7

answered Jul 08 '19 at 10:05

Kulshreshth K

1,096
1
12
28

``` dynamicDropzone1.processQueue(); // process dropzone instance 1 dynamicDropzone2.processQueue(); ``` Hi! How can I make this "dynamic" because users can add like 20 projects or more – Dave Jul 08 '19 at 10:11
@JohnDaveManuel you need to set 'Dropzone.autoDiscover = false' and see this https://github.com/enyo/dropzone/issues/829 for more help if it helps, please upvote. – Kulshreshth K Jul 08 '19 at 10:20
I was able to make it. I put the instances in an array and loop and trigger the processQueue on each – Dave Jul 15 '19 at 04:04

Trigger Multiple Dropzone Upload in a single button

1 Answers1