Clash Royale CLAN TAG

jQuery how to check if uploaded file is an image without checking extensions?

Newbie here. The problem is that I currently have written a method which checks uploaded file size and extension in order to validate it. However, checking extensions is not a solution as that kind of validation may cause a lot of problems. What I want to do is to check the actual file type and validate it without using extension method. I have tried to use jQuery file validator but to no avail... This is a snippet from my current code:

<input type='file' id='imageLoader' name='imageLoader' accept="image/*" data-type='image' />


Script:

App.Dispatcher.on("uploadpic", function() {
$(":file").change(function() {
if (this.files && this.files[0] && this.files[0].name.match(/.(jpg|jpeg|png|gif)$/) ) {
if(this.files[0].size>1048576) {
alert('File size is larger than 1MB!');
}
else {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
} else alert('This is not an image file!');
});
function imageIsLoaded(e) {
result = e.target.result;
$('#image').attr('src', result);
};
});


It is called once the upload input changes and after validation it uploads and displays the image. For now, I only care about validation and any help or ideas would be greatly appreciated!

6 Answers
6

Try something like this:

var file = this.files[0];
var fileType = file["type"];
var ValidImageTypes = ["image/gif", "image/jpeg", "image/png"];
if ($.inArray(fileType, ValidImageTypes) < 0) {
// invalid file type code goes here.
}


You don't need jquery here.

var mimeType=this.files[0]['type'];//mimeType=image/jpeg or application/pdf etc...


//ie image/jpeg will be ['image','jpeg'] and we keep the first value
if(mimeType.split('/')[0] === 'image'){
console.log('the file is image');
}


You can also create a function to check when a file is image.

function isImage(file){
return file['type'].split('/')[0]=='image');//returns true or false
}

isImage(this.file[0]);


Update (es6)

using es6 includes method, makes it even more simple.

includes

const isImage = (file) => file['type'].includes('image');


What I want to do is to check the actual file type

Try accessing files[0].type property . See Using files from web applications

files[0].type

$(":file").on("change", function(e) {

console.log(this.files[0].type);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='file' id='imageLoader' name='imageLoader' accept="image/*" data-type='image' />

Pls refer a related query here. The answer here suggests to load the image in an Image object and check for it's width and height properties to be non zero.
I think the technique can be used to solve your problem too.

I also worked out a fiddle for you to refer. Pertinent code below:

var img = new Image();
img.addEventListener("load",function(){
alert('success');
});
img.addEventListener("error",function(){
alert('error');
});
img.src = picFile.result;


Here is a quick tip if you just want to know if the file is a image:

var file = this.files[0];
var fileType = file["type"];

if (fileType.search('image') >= 0) {
...
}


If anyone comes here who is using jQuery Validator, a simple method would be:

jQuery.validator.addMethod(
"onlyimages",
function (value, element) {
if (this.optional(element) || !element.files || !element.files[0]) {
return true;
} else {
var fileType = element.files[0].type;
var isImage = /^(image)//i.test(fileType);
return isImage;
}
},
'Sorry, we can only accept image files.'
);


which is then added to the .validate() function.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.