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)