dropzonejs file types

Question

I'm using dropzonejs for a simple file-upload. I currently have a few issues though.

I don't know how to restrict the types of files being uploaded. I have file-verification on my PHP-backend, but files seem uploaded (they get a checkmark) even though they don't pass these filters. This isn't a real issue though. The only type of extra javascript-filtering I would like is the file type. Currently you can select any type of file, but I'd like to restrict this to image files in one uploader and pdf/word/excell in another. Can this be done in the plugin itself, or how can it be done with js elsewhere?

The plugin does not require jquery, but I'm using jquery elsewhere so it can be used for a solution.

Answer 1

From the dropzone documentation (http://www.dropzonejs.com/) there is the accept option -

Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don't.");
    }
    else { done(); }
  }
};

All you have to do is modify it for your purposes, like accepting files with certain extensions.

Answer 2

Dropzone default way of handling an error is to show it on the screen (as an X in its default template). In order to handle it differently, I handled the error event:

this.on('error', function (file, errorMessage, xhrError) {
        this.removeFile(file);
        alert(errorMessage);
    });

This way, an error is displayed, and no file uploaded UI illusion is displayed.