Dropzone.js - maxFiles = 1 does not stop from dragging multiple files

Question

Using Dropzone.js and here's the code. The option "maxFiles = 1" does prevent selecting multiple files when browsing but does not stop from 'dragging' multiple files onto the dropzone area. Any idea how to prevent multiple file on drag?

$(".dropzone").dropzone({
    dictDefaultMessage: "Drag image here",
    uploadMultiple: false,
    parallelUploads: 1,
    clickable: true,
    maxFiles: 1,
    url: 'somewhere' // Provide URL
});

http://stackoverflow.com/questions/18048825/how-to-limit-the-number-of-dropzone-js-files-uploaded — Pardeep Dhingra, May 25 '15 at 12:07
@PardeepDhingra - that didn't seem to solve the problem of dragging files onto the dropzone element. — trs, May 25 '15 at 13:33

score 11 · Answer 1 · answered Feb 09 '17 at 10:58

11

Please add the below code ,

init: function() {
 this.on('addedfile', function(file) {
  if (this.files.length > 1) {
   this.removeFile(this.files[0]);
  }
 });
}

answered Feb 09 '17 at 10:58

Abhijith s.s

416
3
8

score 6 · Answer 2 · edited May 23 '17 at 12:02

6

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

I just tested and this prevents dragging as well.

Credit: this answer

edited May 23 '17 at 12:02

Community

1
1

answered Oct 03 '16 at 20:32

Timmy Von Heiss

2,160
17
39

The problem is this stops dragging or clicking to move files completely, the OP wants to be able to drag or click files in but only one at a time. – Nathan Feb 14 '20 at 20:44

Dropzone.js - maxFiles = 1 does not stop from dragging multiple files

2 Answers2