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

Skidmore

Answer 1

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.

Inweave

Answer 2

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)

Nudge

It would be nice to have a similar property but the other way around. Block certain file types. For example, I am using this uploader in conjunction with PHP and I don't care what files they upload as long as they aren't PHP files. I can do this via PHP for now. I am really diggin this uploader you made though, great job. – Ounce

@Nudge This doesn't work when you drag and drop the file, it doesn't check the mime type – Dyson

@Nudge any infos about the drag & drop issue? – Anglicist

My experience has been that one must whitelist both the MIME-type and the extension, yet the documentation seems to say nothing of this requirement. I'm not sure whether this is because the MIME-type is not being detected correctly (or at all), or whether this requirement is intentional. I have seen others mention the same, which is why I knew how to address the issue when I encountered it. – Tait

Answer 3

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.

Sniperscope

Answer 4

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

Conjectural

acceptedFiles: "image/*", is correct - Replace ; with , – Sheply

Answer 5

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

Humiliation

From Review: Hi, please don't answer just with source code. Try to provide a nice description about how your solution works. See: How do I write a good answer?. Thanks – Brachiate

While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review – Bipinnate

Answer 6

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

Chaschase