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?

Brumfield

better approach here https://mcmap.net/q/239009/-how-to-limit-the-number-of-dropzone-js-files-uploaded – Urumchi

@Urumchi Yes. That's a cool approach. But I don't see how that disables the clickable form (the question posed). What am I missing? – Metonym

@Brumfield Excellent question. The clickable attribute doesn't seem to be working either. – Stoke

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

Platus

This should be the accepted answer--it's the most elegant solution I've seen for this. – Vergos

@Platus Excellent answer. I was looking for a way to achieve this for ages but with no luck. CSS did the trick! Thank you. – Stoke

When displaying "Remove Links" additionally use .dz-remove { pointer-events: all; cursor: default; } to keep them clickable. – Vitalism

just keep in mind pointer-events only work for IE11 and above... okok, it's just me who have to stumble around with this crappy old IE versions. but though ;) – Hangover

Great solution! very fast and auto disable without adding extra code. – Mowbray

I not really agree with this, for me css should only get styles not comportements :-/ – Annunciator

With this solution, I can still drop more files onto the dropzone. – Maros

It's old version DropzoneJs. How use in new verisons? – Prober

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

Fleawort

This is exactly what I was looking for – Stoffel

This does not fire the dropbox disable and enable events, and therefore keeps history of previous session. – Residence

I've been struggling for hours, thank you. Would be better to have "beforeSelectingFiles" event in this plugin – Basifixed

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

Turbit

Answer 4

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

Rigsdaler

Answer 5

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.

Endosperm

You can set this, but it does nothing. Dropzone is still clickable. – Guerrero

This worked perfectly for what I was wanting to do. Thanks! – Domiciliate

Answer 6

The easiest way is: myDropzone.disable();

Marlee

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.

Metonym

I want to disable only after user activated the maxfilesreached event. This is not a good solution for me. – Brumfield

I've been experimenting with maxfilesexceeded but it appears to fire after the maxFiles has been exceeded, i.e., after adding file #11. – Metonym

and what aabout the maxfilesreached event listener? I think this fire when I added the 10th file. Yes? – Brumfield

@Urumchi Please elaborate the problem you're having with the solution. I don't understand. I tested it again and it still appears to answer the OP's question. – Metonym

if you reach max files and you use this technic there is no way to remove a file and replace it with another one which can be a usecase. – Urumchi

@Urumchi Thanks for the response. However I think the use case you describe is broader than the OP's specific question: "How to disable clickable the form with Dropzone.js?" and request for "any other way to prevent user to add more files". And the response I gave does address that, even though there may be better solutions if the OP steps back and reconsiders the bigger picture in his design. – Metonym

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

Cherianne

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() {

     }
   });

Chaiken

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

Everrs