How to manually trigger click for Dropzone (open select file dialog)

Question

Dropzone only works on the element itself i have an SPAN tag inside my button, and when i click on the text it won't trigger click on parent element which dropzone is attached to. i tried the following but it doesn't work!

$('.dropzone').click();

and also this

$('.dropzone').trigger('click');

Answer 1

While using vue dropzone you can simply open file dialog using below line.

document.getElementsByClassName("dropzone")[0].click();

Answer 2

by default dropzone only works on on element it self, and if you try to run trigger manually it wont work. the best way i could find after searching A LOT was this:

myDropzone.hiddenFileInput.click()

to find dropzone instant there are several ways:

1- by jquery: var myDropZone = $('.dropzone').get(0).dropzone; or var myDropZone = $("div#dropmehere").dropzone({...}); if you are using id to find your element

2- by Dropzone class itself: var myDropzone = Dropzone.forElement("div#dropmehere");

now you can

Answer 3

Quite late to the party here, but if you're looking for a solution for vue2-dropzone, (the vue wrapper for Dropzone.js), you can give the dropzone a reference (e.g <vue-dropzone ref=dropzone />), then call $refs.dropzone.$el.click() to trigger the file upload dialog.