dropzone.js remove click to upload

Question

I am using the dropzone.js plugin for a project. I'm wondering if there is a way to stop the click event (where you can select a file) but keep the drag and drop function.

The drag and drop are on our entire page and the click is getting annoying when you are just selecting text.

I have tried

$('.dropzone')[0].removeEventListener('click', myDropzone.listeners[1].events.click);

and

$(".dz-hidden-input").prop("disabled",true);

but these disable the drag and drop which I still need to work. Any ideas?

Answer 1

You can set the clickable option to false when initializing the Dropzone. According to the DOCS

If true, the dropzone element itself will be clickable, if false nothing will be clickable.

You can also pass an HTML element, a CSS selector (for multiple elements) or an array of those. In that case, all of those elements will trigger an upload when clicked.

See demo below

 // Dropzone class: $("div#myDZ").dropzone({ url: "/file/post", clickable: false }); 

 #myDZ { padding: 10px; width: 100%; height: 100vh; border: 2px inset #c8c8c8; font-family: Calibri; font-size: 14px; font-weight: bold; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script> <div id="myDZ"> Drag / Drop your files here . Click is <kbd>DISABLED</kbd> and wont work </div>