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

Question

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!

Raja Ram T · Accepted Answer · 2019-01-22 11:24:53Z

88

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

edited Jan 22, 2019 at 11:24

Raja Ram T

9,2814 gold badges35 silver badges32 bronze badges

answered Apr 22, 2015 at 19:18

Hoyen

2,5291 gold badge14 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Acallar Over a year ago

God, why I haven't thought about this? So simple, yet works perefectly, thank you!

Yonn Trimoreau Over a year ago

You shouldn't use capital letters to start a variable's name in Javascript.

Varinder Over a year ago

When I tried the same for docx extension files then file type is empty. Can you tell why it is and how I can check this ?

bruno.almeida Over a year ago

This answer isn't right. If you change the extension of a file to, for example, .png or .jpg, you will always get a valid image file, even if your file is a pdf, txt or something not related with an image. Check @sujit answer or this for a valid solution

bruno.almeida Over a year ago

In the documentation it is at bold this: "Developers are advised not to rely on this property as a sole validation scheme." developer.mozilla.org/docs/Web/API/File/type#Example.

|

Mike Antoniadis · Accepted Answer · 2018-07-30 00:23:45Z

44

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.

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

edited Jul 30, 2018 at 0:23

answered May 8, 2016 at 18:22

Mike Antoniadis

6877 silver badges13 bronze badges

1 Comment

juztcode Over a year ago

changing the extension actually affects the result

Community · Accepted Answer · 2017-05-23 12:02:18Z

12

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;

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Apr 22, 2015 at 19:00

sujit

2,3282 gold badges17 silver badges27 bronze badges

1 Comment

bruno.almeida Over a year ago

This should be the accepted answer. Other answers user file.type, that only have the information of the file extension. For more information check developer.mozilla.org/docs/Web/API/File/type#Example

rom · Accepted Answer · 2020-07-20 15:28:02Z

7

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

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

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

edited Jul 20, 2020 at 15:28

answered Nov 7, 2017 at 12:58

rom

94813 silver badges15 bronze badges

Comments

guest271314 · Accepted Answer · 2015-04-22 19:11:34Z

4

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

Try accessing 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' />

edited Apr 22, 2015 at 19:11

answered Apr 22, 2015 at 18:48

guest271314

1

2 Comments

Acallar Over a year ago

Somehow I managed to miss this .type thingy, no sophisticated methods are needed, this works great, thank you (:

sujit Over a year ago

Just curious. As per your original question "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": - Want to check whether the type attribute really returns anything other than checking the extension internally. Since, while I was attempting to answer the OP, i found that when i renamed a text file to a.png and uploaded it, the type attribute check for image was a success even though the actual file wasn't one.

Tobiq · Accepted Answer · 2022-07-31 11:44:41Z

3

A lot of convoluted answers here. Simply check whether the file has an image mime-type (which would be of the format image/...

const isImage = file => file.type.startsWith("image/")

answered Jul 31, 2022 at 11:44

Tobiq

2,6972 gold badges24 silver badges48 bronze badges

Comments

Neil Thompson · Accepted Answer · 2018-06-07 13:50:37Z

2

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.

answered Jun 7, 2018 at 13:50

Neil Thompson

6,4652 gold badges33 silver badges55 bronze badges

Comments

Dharman · Accepted Answer · 2022-11-15 15:11:52Z

1

$('#direct_upload').change(function() {

      if (this.files[0].type.includes('image')) {
        document.getElementById('attach_file').src = window.URL.createObjectURL(this.files[0])
      } else {
        console.log('it is a doc');
      }
}

edited Nov 15, 2022 at 15:11

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered May 23, 2022 at 9:25

Mohammed Shabeer k

2872 silver badges5 bronze badges

Comments

Oleg Sevruk · Accepted Answer · 2019-03-31 08:39:19Z

0

You could try to convert file type in string and after that slice this string like that:

if(String(file.type).slice(0, 6) === 'image/') {....some code}

answered Mar 31, 2019 at 8:39

Oleg Sevruk

1,0599 silver badges11 bronze badges

Comments

VillageSavers · Accepted Answer · 2022-02-12 19:02:21Z

Using jQuery version 3.3.1:

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <label class="custom-file-label" for="customFile">Select Image</label>
  <br>
  <input type="file" class="custom-file-input" id="customFile">
</body>

<script>
  $(document).ready(function() {
    $(document).on("change", ".custom-file-input", function() {
      var myImg = this.files[0];
      var myImgType = myImg["type"];
      var validImgTypes = ["image/gif", "image/jpeg", "image/png"];

      if ($.inArray(myImgType, validImgTypes) < 0) {
        alert("Not an image")
      } else {
        alert("Is an image")
      }

    });
  });
</script>

</html>

Collectives™ on Stack Overflow

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

10 Answers 10

8 Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

8 Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related