views:

265

answers:

5

I have an file input tag in my web app. I'd like to check that the file isn't too big before sending it to the server. Of course, I still have validation server side. Is there any way to do this with JavaScript? It must work in IE7+ and FF3+. Thank you.

EDIT: somefileinputobject.files[0].filesize works in FF, but not IE.

A: 

Javascript cannot do this. It would have serious security issues. Perhaps flash can though.

Squeegy
JS can. See http://www.w3.org/TR/FileAPI/. Only FF 3.6 supports it for now (as far as I know). It's not insecure, in the sense that the user must select the file. It is less secure, however, in the sense that they no longer have to press a submit button.
konforce
If anything, this statement is an indictment of Flash.
Shaggy Frog
A: 

Short answer: No, you should handle this on the server.

Long answer: Not reliable. With IE you could do something like:

function checkSize(filespec) {
var fso, f, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.GetFile(filespec);
s = f.size;
// Do something with var s
}

But this can easily be comprimised by the browser's security settings or the usage of another browser or platform.

James
A: 

Cannot be reliably done with Javascript for all browsers, but you can limit the total size of the posted data from the web.config

Chris Ballance
+1  A: 

It's a hard problem. You have to do it with AJAX, and use the filesize headers sent by the browser to the server on the POST request.

Yahoo's UI Library has a tool to help with this. YUI Uploader

Jeremy DeGroot
This solution would work for me if I can check the filesize headers using jQuery/Javascript before the Ajax submission. Is this possible, and if so how? Thanks.
TonE
I'm afraid it's not. I think that Flash has capabilities for that. If you can afford the performance cost of a round-trip server request, I'd have your script store the information from the headers on POST and then have your JQuery retrieve them in a separate call. I believe that's how the YUI tool works.
Jeremy DeGroot
A: 

You really don't have a lot of options if you are using the traditional file input control. You cannot check it on the client side and it will hit your configured maxRequestLength before you get the opportunity to check it server side. You can catch the exception that occurs when the maxRequestLength is exceeded though.

Jim Petkus