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

Idelson

#18049325 – Gilemette

@PardeepDhingra - that didn't seem to solve the problem of dragging files onto the dropzone element. – Idelson

Answer 1

Please add the below code ,

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

Nylon

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

I just tested and this prevents dragging as well.

Credit: this answer

Monogamous

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. – Ascendant