Check an image mime type with FileReader javascript before uploading that

Question

I am wondering to know whether I can check a file mime type before uploading that or not? I've already know how to do that in server side after uploading that file, but how can I do that in client side before uploading the file?

index code:

<form action="/" method="post" enctype="multipart/form-data" id="form">
  <input id="image" type="file" />
  <input type="submit" value="Submit" id="submit" />
</form>

What I want is this: as soon as user upload an image, check its mime type in client side. It should be jpg, jpeg or png.

NOTE: I don't want to check its extension, that is really easy. I want to check its mime type. For example if a person rename a txt.txt to txt.png, should give an error.

Thanks in advance.

If you can help me with this, that would be better: The reason I want to check the mime type on client is that I want to preview that image immediately after choosing that, and if a user choose a non-image file, it will preview an ugly photo icon. I want to prevent that. For example if a person choose a non-image file, simply display them that the file you choosed, is not image. So if you can show me how to check whether the image can be displayed or not.

A MIME type, like a file extension, is just a label. Browsers generally infer it from the file extension. If you want to test if the image is an image, then you'll need to examine the raw data (and even then, the user can always override the JavaScript since it runs in their browser). — Quentin
– Quentin, Commented Feb 2, 2017 at 10:00

Zoe - Save the data dump · Accepted Answer · 2018-08-07 21:20:25Z

1

Try This.

document.getElementById('fileChooserID').files[0].type

edited Aug 7, 2018 at 21:20

Zoe - Save the data dump

28.4k22 gold badges130 silver badges163 bronze badges

answered Feb 2, 2017 at 10:04

Sanjay

2,5131 gold badge16 silver badges29 bronze badges

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

1 Comment

Joseph Over a year ago

That checks based on the file type. If I rename a file.exe into file.png, it wouldn't work.

Collectives™ on Stack Overflow

Check an image mime type with FileReader javascript before uploading that

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related