How to trigger the Dropzone.js' default file upload input?

Question

I'd like to know how to trigger the Dropzone.js' default file upload input? It's not as simple like this:

window.dropCloud = = new Dropzone("#dropCloud", {...});
$(window.dropCloud.clickableElements[0]).trigger("click");

Now i don't have any ideas. Anyway the whole #dropCloud container is hidden, if it matters.

Pummel

Answer 1

This seems to work great for me

var dropZone = new Dropzone($("#yourdropzonedivthinger").get(0), {
BLAH BLAH BLAH drop zone init stuff
});

//Call this anywhere in your code to manually trigger the dropzone file dialog popup thinger

dropZone.hiddenFileInput.click();

Croatia

Answer 2

Simple. In version 4.0 you can do:

new Dropzone(".element", {
    clickable: '.myTrigger'
});

new Dropzone(".element", {
    clickable: ['.myTrigger', '.myOtherTrigger']
});

Geisler

Answer 3

I had same problem and after quite a time of trying, i finally found a way how to add additional clickable areas to existing DropZone upload form.

Note: There must be at least one "original" clickable area attached initially by clickable parameter.

var DZ = Dropzone.forElement('.dropzone'); // Change selector to yours
var new_clickable = $('.new-clickable')[0]; // Change selector to yours
var new_listener = jQuery.extend({}, DZ.listeners[DZ.listeners.length - 1]);
new_listener.element = new_clickable;
DZ.clickableElements.push(new_clickable);
DZ.listeners.push(new_listener);
DZ.disable(); 
DZ.enable();

Basically what i do is

1. Add new clickable DOM element to DZ.clickableElements.
2. Clone last DZ.listeners array object.
3. Replace element property in new_listener object with ours.
4. Add both new_clickable and new_listener back to DZ.
5. Call DZ.disable() and DZ.enable() which reattaches all the event handlers.

Concertize

Answer 4

Sigh... I think its the ugliest solution I've made... While init fn running.

this.clickableElements.push($("#anotherUploadBtn")[0]);
this.clickableElements.forEach(function(y){ ....

Any better ideas?

Pummel

Answer 5

jQuery("#file-uploader").dropzone({
        url: "/upload/",
        paramName: "file",
        maxFilesize: 5,
        acceptedFiles: 'image/*,.jpeg,.jpg',
        autoProcessQueue: true,
        clickable: ['#file-uploader *','#file-uploader'],
        init: function() {
            this.hiddenFileInput.click(); //opens the file select dialogue
        },
        accept: function(file, done) {
            // some code
            done();
        },
        success: function (file, responseText)
        {
            var responseJSON = JSON.parse(responseText);

            // some code
        },

});

Soembawa

Please provide some explanation in addition to the code. – Onetoone

i.e. you can put the code above into a function, when you call the function, the select file will open automatically with the initialization of dropzone. For example the user has to accept the upload rules before he/she can upload files, after he/she accepts the rules with click on the accept button you can call the function to initialize the dropzone and the select file window will open. – Soembawa