Skip to content
Advertisement

How to check file MIME type with JavaScript before upload?

I have read this and this questions which seems to suggest that the file MIME type could be checked using JavaScript on client side. Now, I understand that the real validation still has to be done on server side. I want to perform a client side checking to avoid unnecessary wastage of server resource.

To test whether this can be done on client side, I changed the extension of a JPEG test file to .png and choose the file for upload. Before sending the file, I query the file object using a JavaScript console:

JavaScript

This is what I get on Chrome 28.0:

File {webkitRelativePath: “”, lastModifiedDate: Tue Oct 16 2012 10:00:00 GMT+0000 (UTC), name: “test.png”, type: “image/png”, size: 500055…}

It shows type to be image/png which seems to indicate that the checking is done based on file extension instead of MIME type. I tried Firefox 22.0 and it gives me the same result. But according to the W3C spec, MIME Sniffing should be implemented.

Am I right to say that there is no way to check the MIME type with JavaScript at the moment? Or am I missing something?

Advertisement

Answer

You can easily determine the file MIME type with JavaScript’s FileReader before uploading it to a server. I agree that we should prefer server-side checking over client-side, but client-side checking is still possible. I’ll show you how and provide a working demo at the bottom.


Check that your browser supports both File and Blob. All major ones should.

JavaScript

Step 1:

You can retrieve the File information from an <input> element like this (ref):

JavaScript

Here is a drag-and-drop version of the above (ref):

JavaScript

Step 2:

We can now inspect the files and tease out headers and MIME types.

✘ Quick method

You can naïvely ask Blob for the MIME type of whatever file it represents using this pattern:

JavaScript

For images, MIME types come back like the following:

image/jpeg
image/png

Caveat: The MIME type is detected from the file extension and can be fooled or spoofed. One can rename a .jpg to a .png and the MIME type will be be reported as image/png.


✓ Proper header-inspecting method

To get the bonafide MIME type of a client-side file we can go a step further and inspect the first few bytes of the given file to compare against so-called magic numbers. Be warned that it’s not entirely straightforward because, for instance, JPEG has a few “magic numbers”. This is because the format has evolved since 1991. You might get away with checking only the first two bytes, but I prefer checking at least 4 bytes to reduce false positives.

Example file signatures of JPEG (first 4 bytes):

FF D8 FF E0 (SOI + ADD0)
FF D8 FF E1 (SOI + ADD1)
FF D8 FF E2 (SOI + ADD2)

Here is the essential code to retrieve the file header:

JavaScript

You can then determine the real MIME type like so (more file signatures here and here):

JavaScript

Accept or reject file uploads as you like based on the MIME types expected.


Demo

Here is a working demo for local files and remote files (I had to bypass CORS just for this demo). Open the snippet, run it, and you should see three remote images of different types displayed. At the top you can select a local image or data file, and the file signature and/or MIME type will be displayed.

Notice that even if an image is renamed, its true MIME type can be determined. See below.

Screenshot

Expected output of demo


JavaScript
JavaScript
JavaScript
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement