Validate file upload with javascript/jquery

Question

Ok, this is frustrating. I have searched a lot on google on how to validate selected file (to upload) extension and size but no success on the file size matter. I have an image upload control in asp.net (meant to upload images) but the extension and file size is validated on the server. That's how it works. What if the user submits a 1GB file that is a movie renamed to .jpg?

Somehow Twitter for example managed to validate the input file on client side, both extensions and file size. Anyone got any ideas how to do that before submitting to the server?

Thanks!

LE: No, no HTML5. It's not supported in all browsers. I need a solution to work in IE 7 and 8 also!

Looks like you didn't look very hard here either. http://stackoverflow.com/questions/4112575/client-checking-file-size-using-html5 — Diodeus - James MacFarlane, Mar 15 '13 at 18:41
This is a bit too easy: https://www.google.com/search?q=jquery+file+upload+validation ... I use https://github.com/valums/file-uploader for async uploads, but you could just use the validation bits if you like — BLSully, Mar 15 '13 at 18:41

score 3 · Answer 1 · answered Mar 15 '13 at 18:41

3

If the user browser supports the html5 fileapi, you can read a file size from the file input.

document.getElementById('file').files[0].size  //size of file in bytes
document.getElementById('file').files[0].name  //name of file
document.getElementById('file').files[0].type  //mime type

answered Mar 15 '13 at 18:41

Musa

96,336
17
118
137

Thanks for answering, but correct me if i'm wrong, html5 is not supported in all modern browsers. IE 7 and 8 , probably event 9 doesn't support it? I need a method to work on those too. – osmiumbin Mar 15 '13 at 18:43
You say modern browsers but you call IE7 and 8(and 9)? If you want this to work in all these browsers which I don't think is a good idea, you may have to look into browser specific solutions, like ActiveXObject in IE or even *dum dum dum* Flash. – Musa Mar 15 '13 at 18:50

score 0 · Answer 2 · answered Mar 15 '13 at 18:57

The HTML5 api, as pointed out by Musa, would probably filter out the majority of cases.

There are proprietary ActiveX methods that may do this too, but support is a bit of an unknown.

Flash can do the check for you if you insist on no html5, you could look in to something like swfupload https://code.google.com/p/swfupload/

Validate file upload with javascript/jquery

2 Answers2