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

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

• javascript
• jquery
• forms
• dropzone.js

• stackoverflow./questions/18048825/… – Pardeep Dhingra Commented May 25, 2015 at 12:07
• @PardeepDhingra - that didn't seem to solve the problem of dragging files onto the dropzone element. – trs Commented May 25, 2015 at 13:33

2 Answers 2

Please add the below code ,

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

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