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

Answer 1

Please add the below code ,

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

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