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
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
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)
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.
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.
var myDropzone = new Dropzone('div#profile_pictures',{
acceptedFiles: "image/*", /*is this correct?*/
init: function(){
this.on("success", function(file, data) {
/*..*/
});
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With