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.
Add a comment
|
3 Answers
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
Try choosing an image, check the MIME type, and try to submit it. Then try something else that's not an image.
6 Comments
Delan Azabani
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.
Shlomo Zalman Heigh
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 <img> tag. I want to know the MIME type so I can make sure it is a valid image.
Delan Azabani
Oh, sure, my second answer does exactly what you want. Give me a few minutes; I'll write a demo.
Shlomo Zalman Heigh
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.
Delan Azabani
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.
|
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.
1 Comment
Delan Azabani
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.
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.
