2

How to validate the content-type of a file before uploading using JavaScript? I'm not asking the extension validation. I want to validate pdf,plain text and MS word files.

I'm using a django forms.ModelForm to pass file upload widget to html. I couldn't achieve this either on server side. Here is that question,

Django - Uploaded file type validation

Community
  • 1
  • 1
Babu
  • 2,396
  • 2
  • 25
  • 44

2 Answers2

2

In theory you could use the File API to read the files.

You would then need to write parsers in JavaScript for the file formats you cared about to check if they matched.

Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
  • Note: You don't have to parse the file; if you have a File object, you can read it's `type` attribute: https://developer.mozilla.org/en/Using_files_from_web_applications/ That said, the File API is HTML 5 and work in progress. – Aaron Digulla Aug 02 '12 at 08:48
  • @AaronDigulla — That requires trusting the browser to correctly determine the file type. I'd expect browsers to ask the underlying OS and Windows (at least) to use the file extension. – Quentin Aug 02 '12 at 09:35
  • @Quentin: Even if you try to parse the files, an attacker could easily circumvent this by uploading using a command line tool. So no matter how you do it, it's going to be a weak defense which leads to the question how much effort you should spend on it. – Aaron Digulla Aug 02 '12 at 10:02
  • @AaronDigulla — See my first comment on your answer. – Quentin Aug 02 '12 at 10:16
2

Maybe but it won't give you any form of security because an attacker could use other means to upload files thus circumventing your validation.

To check the file type using the extension (which is very insecure since it's dead easy to manipulate it), you can use JavaScript. See this question: How do I Validate the File Type of a File Upload?

[EDIT] After some googling, I found that the input element has an attribute accept which takes a list of mime type patterns. Unfortunately, most browsers ignore it (or only use it to tweak the file selection dialog). See this question: File input 'accept' attribute - is it useful?

[EDIT 2] Right now, it seems that the File API (see "Using files from web applications") is your only way it you really don't want to use file extensions. Each File instance has a type property which contains the mime type.

But this API is work in progress, so it's not available everywhere. And there is no guarantee that you'll get a MIME type (the property can be "").

So I suggest this approach: Try the File API. If it's not available or the type property is empty, use the file extension.

Community
  • 1
  • 1
Aaron Digulla
  • 297,790
  • 101
  • 558
  • 777
  • Presumably, like all client side validation, the purpose is not to be secure but to save the user from uploading a (potentially large file) only to have it rejected. – Quentin Aug 02 '12 at 08:28
  • 1
    The question explicitly rejects file extension checking. – Quentin Aug 02 '12 at 08:28
  • IIRC, implementations of the accept attribute are usually based on the file extension. – Quentin Aug 02 '12 at 08:43
  • 1
    1. There doesn't seem to be a way to do it without using the file extension. 2. The server can read the first few KB of the file, analyze them and reject them (close channel). Most server frameworks don't support this out of the box but it's possible. – Aaron Digulla Aug 02 '12 at 08:45