JQuery, how to check if a downloaded file is an image without checking extensions?

Question

Newbie here. The problem is that I have currently written a method that checks the downloaded size and file extension to check it. However, checking extensions is not a solution, because such checking can cause many problems. I want to check the actual file type and check it without using the extension method. I tried using 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 after changing the input and after checking its loading and displaying the image. So far, I only care about checking, and any help or ideas would be greatly appreciated!

Answer 1

Try something like this:

Javascript

 const file = this.files[0]; const fileType = file['type']; const validImageTypes = ['image/gif', 'image/jpeg', 'image/png']; if (!validImageTypes.includes(fileType)) { // invalid file type code goes here. } 

JQuery

 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. } 

Answer 2

You do not 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 an image.

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

Update (es6)

Using the es6 includes method makes it even simpler.

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

Answer 3

Here's a quick tip if you just want to find out if the file is an image:

 var file = this.files[0]; var fileType = file["type"]; if (fileType.search('image') >= 0) { ... } 

Answer 4

What I want to do is check the actual file type

Try accessing the files[0].type property. See Using Files from Web Applications.

 $(":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' /> 

Answer 5

Pls refer to the related request here . The answer here is to load the image into an Image object and verify that its width and height properties are not zero. I think this technique can be used to solve your problem.

I also developed a fiddle for you. Relevant code below:

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

Answer 6

If someone comes here who uses 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.