how to validate input type = 'file' with javascript?

Question

you cant change the value of the input type = 'file' in a form because of security reasons. But is it possible to read the value at all with javascript to then check extensions and validate the form? or will that also be a security breach?

Some examples would ease my pain...

thanks

Answer 1

You can only read the name of the file and it's extension, so eg: 'file.zip'. It won't tell you the path, unless you are using IE.

Here's a simple example:

<input type="file" onblur="alert(this.value)" />

This will give you the filename + extension..

Answer 2

Sure you can read the value. Just read and validate it as you do for every other form element. Have you tried it yourself anyway? This particular question doesn't make me think so. A bit more programming effort from your side is highly appreciated.

Answer 3

You can read the extension of the filename from input.value, sure. But it won't do you any good. You don't know what file extensions are mapped to the various filetypes under the user's operating system, and you don't even know the user's OS uses filename extensions for filetyping. OS X and Linux users are quite likely to submit files with no file extension at all.

There's nothing worse than an idiotic file upload that won't accept your JPEG because it thinks JPEGs have to end in ‘.jpg’.