How to disable clickable form using Dropzone.js?

Question

I use Dropzone.js to upload files to the server. I set my Dropzone maxFiles parameter to 10 and I have tried this:

 $('.dropzone').dropzone({ maxFiles: 10, init: function() { this.on('maxfilesreached', function() { $('.dropzone').unbind('click'); }); } }); 

... but does not work. What is a solution to remove clicks from .dropzone or in some other way so that the user cannot add more files?

Answer 1

Why don't you just use CSS to disable the click event. When the maximum files are reached, Dropzone will automatically add the dz-max-files-reached class.

Use css to disable clicking on dropzone: .dz-max-files-reached { pointer-events: none; cursor: default; } .dz-max-files-reached { pointer-events: none; cursor: default; }

Answer 2

It works EXCELLENT !!! and works with 4.0.1

 //disable the click of your clickable area $(".dz-hidden-input").prop("disabled",true); //enalbe the click of your clickable area $(".dz-hidden-input").prop("disabled",false); 

Answer 3

 myDropzone.on('maxfilesreached', function() { myDropzone.removeEventListeners(); }); myDropzone.on('removedfile', function (file) { myDropzone.setupEventListeners(); }); 

Don't forget init _updateMaxFilesReachedClass if you have files from your server.

 myDropzone._updateMaxFilesReachedClass() 

Answer 4

The Dropzone object has a clickable parameter field, which is true by default.

Depending on your scenario, you can set this value to false when registering a Dropzone instance, or if necessary update the value at run time.

Answer 5

Here we go, updated based on the comments below.

How to disable the “click to open dialog” dropzone event when maxFiles is reached:

 $('.dropzone').dropzone({ maxFiles: 10, init: function() { this.on('maxfilesreached', function() { $('.dropzone').removeClass('dz-clickable'); // remove cursor $('.dropzone')[0].removeEventListener('click', this.listeners[1].events.click); }); } 

I don’t know how reliable "1" is in this.listeners[1] , but that the click event function lives in my current dropzone configuration.