How to disable clickable the form with Dropzone.js?

Question

I\'m using Dropzone.js to upload files to the server. I setting up my Dropzone maxFiles parameter to 10 and I was tried this:

$(\'.         


        

Answer 1

If clickable option is set to 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.

var myDropzone = new Dropzone("div.dropzone", { url: "/file/post", clickable: false });

Answer 2

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 3

Here we go, updated based on comments below.

How to disable the dropzone "click to open file dialog box" 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 the "1" in this.listeners[1] is, but that's where the click event function lives in my current dropzone configuration.

Answer 4

This works PERFECTLY!!! and works on 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);