Dropzone.js rejected files in file previews

Question

I have a simple dropzone instance for document upload (only specific file extensions). When I drop a file with other than desired extension on the dropzone element, it shows a message about wrong file extension (which is ok) and creates the same element it would create for a valid file.

Is there some option to show only the message and prevent creation (or showing) of the rest of the element? Or an event fired on file rejection? I noticed that the element of rejected file has class 'dz-error', so I suppose I could use that somehow in the fileAdded callback, but I also think there must be a better way. JS code for reference below.

var accept = ".pdf,.doc,.docx,.odt";

$(document).ready(function(){
    var DZ = $(dropzoneSelector).dropzone({
        url: "example/url",
        autoProcessQueue: false,
        uploadMultiple: true,
        clickable: clickableSelector,
        addRemoveLinks: true,
        acceptedFiles: accept,
        createImageThumbnails: false,
        init: function(){
            this.on("addedfile", handleFileAdded);
            this.on("removedfile", handleFileRemoved);
        }
    });
}); 

Answer 1

You can listen to error event, then check if the file was accepted and remove it if it wasn't. Your code would look like this:

var accept = ".pdf,.doc,.docx,.odt";

$(document).ready(function(){
    var DZ = $(dropzoneSelector).dropzone({
        url: "example/url",
        autoProcessQueue: false,
        uploadMultiple: true,
        clickable: clickableSelector,
        addRemoveLinks: true,
        acceptedFiles: accept,
        createImageThumbnails: false,
        init: function(){
            this.on("addedfile", handleFileAdded);
            this.on("removedfile", handleFileRemoved);
            this.on("error", function(file){if (!file.accepted) this.removeFile(file);});
        }
    });
});