dropzone.js image upload acceptedMimeTypes

Question

I am using the dropzone.js plugin to add an image uploader to my application. I know this is probably a really basic question so apologies but what I want to do is limit the file extensions. This works for a single file extension,

<script type="text/javascript">
   Dropzone.options.dropzone = {
        accept: function(file, done) {
            console.log(file);
            if (file.type != "image/jpeg") {
                done("Error! Files of this type are not accepted");
            }
            else { done(); }
        }
    }
 </script>

So my question is how to add multiple file extensions, i.e. image/jpeg, image/png?

Thanks

Answer 1

I'm the author of Dropzone.

You should use the acceptedMimeTypes acceptedFiles. This behaves exactly the same as the input element's accept property. This way, even the fallback will work properly.

Valid acceptedFiles properties can look like this:

• audio/*
• image/*
• image/jpeg,image/png
• etc...

EDIT: in the latest versions of Dropzone this property is called acceptedFiles and it allows you to also define extensions. So this would work:

"audio/*,image/*,.psd,.pdf"

(For backwards compatibility acceptedMimeTypes will still work until the next major release)

Answer 2

var dz = $("#FileUpload").dropzone({acceptedFiles: ".jpeg"})[0];

Answer 3

You could add more extensions to your if, like so:

if (file.type != "image/jpeg" && file.type != "image/png") {

This will check if the file type is different from ALL of the types you specify. For a file to pass the check, it has to be different from image/jpeg AND image/png

Update

I would advise to look at enyo's answer since he is the author of Dropzone.

Answer 4

In case someone is interested (I can not comment on Enyo's post): I have had problems with the application of the Dropzone options and after investigating I have noticed that the version of jQuery jquery-3.2.1.min.js that I was using was the cause of its malfunction

Answer 5

var myDropzone = new Dropzone('div#profile_pictures',{
    acceptedFiles: "image/*"; /*is this correct?*/
    init: function(){
        this.on("success", function(file, data) {
            /*..*/
            });
        } 
})

Answer 6

thanks enyo it worked ....awesome...just paste that line in dropjone.js->

uploadMultiple: true,  //upload multiple files
maxFilesize: 1,  //1 mb is here the max file upload size constraint
acceptedFiles: ".jpeg,.jpg,.png,.gif",

http://www.dropzonejs.com/#config-acceptedFiles

The default implementation of accept checks the file's mime type or extension against this list. This is a comma separated list of mime types or file extensions. Eg.: 'image/*,application/pdf,.psd' If the Dropzone is clickable this option will be used as accept parameter on the hidden file input as well.