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

The easiest way is: myDropzone.disable();

Answer 2

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 3

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 4

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 5

@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; 
}

Answer 6

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.