Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

dropzone.js image upload acceptedMimeTypes

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

like image 237
user1098178 Avatar asked Jun 09 '13 17:06

user1098178


4 Answers

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)

like image 59
enyo Avatar answered Oct 11 '22 03:10

enyo


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.

like image 35
Sachin Avatar answered Oct 11 '22 03:10

Sachin


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.

like image 20
jdepypere Avatar answered Oct 11 '22 03:10

jdepypere


var myDropzone = new Dropzone('div#profile_pictures',{
    acceptedFiles: "image/*", /*is this correct?*/
    init: function(){
        this.on("success", function(file, data) {
            /*..*/
            });
        } 
})
like image 9
user2865151 Avatar answered Oct 11 '22 03:10

user2865151