24

I would like to detect the MIME type of a file on the client side of my application using jQuery or JavaScript. Is there a way to do this? Thanks.

Don
  • 746
  • 6
  • 18
Shlomo Zalman Heigh
  • 3,968
  • 8
  • 41
  • 71

3 Answers3

35

You could use AJAX, make a HEAD request, and inspect the response headers for the Content-type header. But that only works if you're getting a file from a HTTP server.

To get the MIME type of a file chosen with an HTML file chooser, without submitting anything, try:

document.getElementById('fileChooserID').files[0].type // e.g. image/png

Example

http://jsbin.com/akati3/2

Try choosing an image, check the MIME type, and try to submit it. Then try something else that's not an image.

Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
  • So, do you mean: allow the user to choose a file in a file chooser, but, without sending anything, determine the MIME type? I'll edit my answer to allow that. – Delan Azabani Jan 03 '11 at 00:37
  • I'm sorry, I guess I didn't explain well enough. The user enters a url to an image starting with file://, and the image is displayed on the page using an tag. I want to know the MIME type so I can make sure it is a valid image. – Shlomo Zalman Heigh Jan 03 '11 at 00:42
  • Oh, sure, my second answer does exactly what you want. Give me a few minutes; I'll write a demo. – Delan Azabani Jan 03 '11 at 00:43
  • The only problem is that I am not using a file input, but a text box for the url, kind of like the url box in a browser. – Shlomo Zalman Heigh Jan 03 '11 at 00:52
  • 1
    If you're using a textbox, for security reasons, the browser does not expose any information about the filename (or even treat it as a file entry). The only way I know of to get this kind of information from the browser is to use a file input and some JavaScript. – Delan Azabani Jan 03 '11 at 00:55
  • Note that this doesn't work in IE 9 and lower. It does work in the IE 10 platform previews, however. – Andy E Oct 31 '11 at 12:20
5

the idea IS NOT trust in the Browser..the idea is perform this validations on SERVER SIDE but, what a usefull thing if prior to send a 20MB file to the browser and next get rejected because a rule in the server...so, it is a good idea to "pre-check" if this file "is a candidate" to be uploaded, the final validation will be performed in the server.

christian
  • 538
  • 5
  • 8
5

The only way to reliably detect a mime type is to parse the file on the server side, to confirm that it is the type that the user claims it to be, or that it fits a list of allowed types. Things to consider:

1 - JavaScript has limited access to the local filesystem, and with good reason.

2 - You cannot trust a mime type which has been received from a browser. It will not necessarily match the mime type of the sent file.

3 - In a situation where the user is allowed to upload files which fit a 'whitelist' of allowed types, validation is probably necessary anyway - considering that the application might have to actually do something with the file beyond storing them, which would at the very least involve parsing their headers for information such as run length (for a video) version number (for a Word document) and so on.

karim79
  • 339,989
  • 67
  • 413
  • 406
  • 7
    That's very true. A semi-clever user wanting to trick the server could spoof the MIME type. The server should always double-check the file type through magic. – Delan Azabani Jan 03 '11 at 00:58