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:

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

...but not working. What is the solution to remove clickable from .dropzone or any other way to prevent user to add more files?

Answer 1

Why do not you just use CSS to disable the click event. When max files is reached, Dropzone will automatically add a class of dz-max-files-reached .

Use css to disable click on dropzone:

.dz-max-files-reached {
  pointer-events: none;
  cursor: default;
}

Answer 2

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);

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

There is an option field on the Dropzone object called clickable that defaults to true .

Depending on your scenario you can either set this to false when you register your Dropzone instance or you can update the value at runtime as needed.

Answer 5

最简单的方法是： myDropzone.disable();

Answer 6

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 7

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 8

This is how I achieved this:

$('.dz-message').html('<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i><i>Maximum uploads have been reached</i></span></span></span>');
$('.dropzone').removeClass('dz-clickable');
$('.dropzone')[0].removeEventListener('click', myDropzone.listeners[1].events.click);
$('.dropzone')[0].removeEventListener('drop', myDropzone.listeners[0].events.drop);
$('.dropzone')[0].removeEventListener('dragstart', myDropzone.listeners[0].events.dragstart);
$('.dropzone')[0].removeEventListener('dragenter', myDropzone.listeners[0].events.dragenter);
$('.dropzone')[0].removeEventListener('dragover', myDropzone.listeners[0].events.dragover);
$('.dropzone')[0].removeEventListener('dragleave', myDropzone.listeners[0].events.dragleave);
$('.dropzone')[0].removeEventListener('dragend', myDropzone.listeners[0].events.dragend);

Answer 9

The Dropzone object has clickable field. That default value is true.

Depending on your scenario you can either set this to false.

    $('.dropzone').dropzone({
     maxFiles: 10,
     clickable: false,
     init: function() {

     }
   });

Answer 10

@XuDing's Answer works like a charm, but I had an edge case where I wanted to keep remove links working so adding an extended solution for that.

Add below CSS classes

.dz-max-files-reached {
    pointer-events: none;
    cursor: default;
}
.dz-remove { 
    pointer-events: all; cursor: default; 
}