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

enyo · Answer 1 · 2013-06-28T18:41:53.813

125

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)

edited Jun 28 '13 at 18:41

answered Jun 24 '13 at 12:47

enyo

16,269
9
56
73

3

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. – Ronnie Oct 01 '14 at 19:34
@enyo This doesn't work when you drag and drop the file, it doesn't check the mime type – Jitender Yadav Apr 12 '16 at 09:15
@enyo any infos about the drag & drop issue? – thomas Apr 25 '16 at 17:18
1

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. – Ben Johnson Nov 03 '17 at 13:06

score 36 · Answer 2 · edited Jan 05 '19 at 05:47

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.

score 20 · Accepted Answer · edited May 23 '17 at 12:26

20

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.

edited May 23 '17 at 12:26

Community

1
1

answered Jun 09 '13 at 17:09

jdepypere

3,453
6
54
84

score 9 · Answer 4 · edited May 14 '19 at 15:13

9

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

edited May 14 '19 at 15:13

VoronoiPotato

3,113
20
30

answered Oct 10 '13 at 01:43

user2865151

91
1
1

1

`acceptedFiles: "image/*",` is correct - Replace `;` with `,` – Kiran Reddy Dec 12 '18 at 13:35

score 1 · Answer 5 · answered Oct 24 '18 at 06:12

1

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

answered Oct 24 '18 at 06:12

Hafsal Rh

191
1
3

1

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?](https://stackoverflow.com/help/how-to-answer). Thanks – sɐunıɔןɐqɐp Oct 24 '18 at 06:35
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](https://stackoverflow.com/help/how-to-answer) very helpful. Please edit your answer - [From Review](https://stackoverflow.com/review/low-quality-posts/21218663) – Nick Oct 24 '18 at 07:58

score 0 · Answer 6 · answered Nov 05 '18 at 11:26

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

dropzone.js image upload acceptedMimeTypes

6 Answers6

Linked