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?

better approach here http://stackoverflow.com/a/19057630/1178072 — zsitro, Jul 10 '14 at 16:59
@zsitro Yes. That's a cool approach. But I don't see how that disables the clickable form (the question posed). What am I missing? — bloodyKnuckles, Jul 10 '14 at 17:22
@netdjw Excellent question. The clickable attribute doesn't seem to be working either. — stratis, Jun 09 '15 at 12:32

score 36 · Accepted Answer · edited Aug 24 '18 at 10:27

36

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

edited Aug 24 '18 at 10:27

Jaye Renzo Montejo

1,812
2
12
25

answered Apr 01 '15 at 13:35

XuDing

1,982
18
27

This should be the accepted answer--it's the most elegant solution I've seen for this. – huwiler May 07 '15 at 02:41
@XuDing Excellent answer. I was looking for a way to achieve this for ages but with no luck. CSS did the trick! Thank you. – stratis Jun 09 '15 at 12:33
7

When displaying "Remove Links" additionally use `.dz-remove { pointer-events: all; cursor: default; }` to keep them clickable. – Atan Oct 29 '15 at 12:01
2

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 ;) – Dominik Nov 04 '15 at 09:47
Great solution! very fast and auto disable without adding extra code. – DeepBlue Jan 08 '17 at 02:34
I not really agree with this, for me css should only get styles not comportements :-/ – Patrick Ferreira Jan 18 '17 at 12:57
2

With this solution, I can still drop more files onto the _dropzone_. – Timo Aug 04 '17 at 12:33
It's old version DropzoneJs. How use in new verisons? – Vito Bryliano Mar 22 '23 at 14:14

score 15 · Answer 2 · edited Jul 03 '15 at 16:50

15

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

edited Jul 03 '15 at 16:50

Agustin Meriles

4,866
3
29
44

answered Feb 18 '15 at 06:45

Dave Geurts

319
3
7

1

This is exactly what I was looking for – ChrisB Mar 16 '16 at 12:35
This does not fire the dropbox disable and enable events, and therefore keeps history of previous session. – Radderz Apr 18 '19 at 16:12
I've been struggling for hours, thank you. Would be better to have "beforeSelectingFiles" event in this plugin – temo Jun 11 '21 at 15:16

score 12 · Answer 3 · answered Apr 22 '16 at 17:30

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

score 3 · Answer 4 · edited May 20 '20 at 02:37

3

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

edited May 20 '20 at 02:37

Oleg Valter is with Ukraine

9,619
8
37
59

answered May 20 '20 at 00:57

shab

81
1
2

score 2 · Answer 5 · answered Nov 20 '14 at 18:31

2

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.

answered Nov 20 '14 at 18:31

Jeff Panici

142
5

5

You can set this, but it does nothing. Dropzone is still clickable. – Miloš Feb 04 '15 at 09:45
This worked perfectly for what I was wanting to do. Thanks! – Quiver Feb 19 '19 at 22:05

score 2 · Answer 6 · answered Mar 22 '20 at 18:02

2

The easiest way is: myDropzone.disable();

answered Mar 22 '20 at 18:02

John Elliott

21
3

bloodyKnuckles · Answer 7 · 2014-06-13T11:32:12.237

1

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.

edited Jun 13 '14 at 11:32

answered Jun 12 '14 at 21:06

bloodyKnuckles

11,551
3
29
37

I want to disable only after user activated the `maxfilesreached` event. This is not a good solution for me. – netdjw Jun 12 '14 at 21:13
I've been experimenting with `maxfilesexceeded` but it appears to fire after the `maxFiles` has been exceeded, i.e., after adding file #11. – bloodyKnuckles Jun 12 '14 at 21:40
and what aabout the `maxfilesreached` event listener? I think this fire when I added the 10th file. Yes? – netdjw Jun 13 '14 at 07:05
@zsitro 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. – bloodyKnuckles Jul 10 '14 at 17:21
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. – zsitro Jul 10 '14 at 19:56
@zsitro 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. – bloodyKnuckles Jul 10 '14 at 20:23

score 0 · Answer 8 · answered May 03 '18 at 18:04

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

score 0 · Answer 9 · answered Apr 09 '20 at 06:39

0

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

     }
   });

answered Apr 09 '20 at 06:39

Raj Kumar

61
1
9

score 0 · Answer 10 · answered Oct 12 '20 at 15:11

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

How to disable clickable the form with Dropzone.js?

10 Answers10

Linked