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

Question

Using Dropzone.js and here is the code. The parameter "maxFiles = 1" does not allow you to select multiple files when viewing, but does not stop "dragging" several files onto the dropzone area. Any idea how to prevent dragging and dropping multiple files?

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

Answer 1

Why don't you just use CSS to disable the click event. When the maximum files are reached, Dropzone will automatically add the dz-max-files-reached class.

Use css to disable click on dropzone:

.dz-max-files-reached {
      pointer-events: none;
      cursor: default;
}

I just tested and it also prevents drag and drop.

Credit: this answer

Answer 2

, ,

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