DropzoneJS: Prevent uploading and displaying unsupported files

Question

For my project I'm using the Drag & Drop library DropzoneJS. It's working nicely, but I want to have a specific functionality that (for as far as I can see) is not supported 'out of the box'.

In my Dropzone config I've specified the acceptedFiles:

acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf"

When I use the browse button it automatically checks if the file is supported or not. But when I drag & drop files, the check is done AFTER the upload has already been done, and displays the file with an error message.

What I'd like to achieve is that the drag & drop first checks if the files are supported, and automatically discard the unsupported file. I'd still like to display an error message which states that some of the files are not supported.

For reference, here is my complete Dropzone config:

import Dropzone from 'dropzone';

export default class UI_DropZone {
  constructor() {
    if (document.querySelector('#dropZone')) {
      let previewNode = document.querySelector("#template");
      previewNode.id = "";
      let previewTemplate = previewNode.parentNode.innerHTML;
      previewNode.parentNode.removeChild(previewNode);

      return new Dropzone("#dropZone", {
        url: "/dist/files",
        thumbnailWidth: 300,
        thumbnailHeight: 300,
        parallelUploads: 20,
        maxFilesize: 10,
        acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf",
        previewTemplate: previewTemplate,
        previewsContainer: '#previews',
        clickable: '.fileinput-button',
        autoProcessQueue: false
      });
    }
  }
}

Answer 1

You can catch errors and remove the file with some sort of notification if it is a problem:

init: function() {
    this.on("error", function(file, message, xhr) { 
       if (xhr == null) this.removeFile(file); // perhaps not remove on xhr errors
       alert(message);
    });
 }

So with your config this will look like:

return new Dropzone("#dropZone", {
    url: "/dist/files",
    thumbnailWidth: 300,
    thumbnailHeight: 300,
    parallelUploads: 20,
    maxFilesize: 10,
    acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf",
    previewTemplate: previewTemplate,
    previewsContainer: '#previews',
    clickable: '.fileinput-button',
    autoProcessQueue: false,
    "error": function(file, message, xhr) {
       if (xhr == null) this.removeFile(file); // perhaps not remove on xhr errors
       alert(message);
    }
});

Example: https://jsfiddle.net/m4ye8gL2/1