When attaching the .dropzone() object via jQuery, generally it does not allow you to click child elements and open the upload dialog.
In this case below, if you click the H3 element, the upload dialog is not opened, you must click outside of the H3 but still inside of the parent tag. This gets very frustrating.
<div id="my-dropzone">
<h3>Drag and drop files here</h3>
</div>
$('#my-dropzone').dropzone();In the example above the H3 tag is not clickable and does not fire file upload window.
There is an option to attach clickable event manually to a given element. A css class dz-clickable can be passed to an element to make it clickable.
This option however works only once. That is, only the very first element with this class becomes clickable and any other elements with this class remains un- attached. For example the <p> tag below wont be clickable
<div id="my-dropzone">
<h3 class="dz-clickable">Drag and drop files here</h3>
<h2 class="dz-clickable">Drag and drop files here</h2>
</div>Another option to make all elements within the dropzone is to specify clickable option. clickable option like any other jQuery selector accepts multiple selectors. For example:
$('#my-dropzone').dropzone({
url:'/design-quote',
clickable: '#my-dropzone h3, #my-dropzone h2'
});Many elements can be grouped within an element such as div and specify the clickable option for div. e.g;
<div id="my-dropzone">
<div>
<i class="fas fa-plus"></i>
<h3 class="dz-clickable">Drag and drop files here</h3>
<h2 class="dz-clickable">Drag and drop files here</h2>
...... more elements here.
</div>
</div>
//related js code
$('#my-dropzone').dropzone({
url:'/url_to_upload_file',
clickable: '#my-dropzone > div'
});
