CODEWITHSUNDEEP
javascriptfileinputfilesize
geowa4
geowa4

Reputation: 41803

How to retrieve the size of a file before uploading it?

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.

Upvotes: 6

Views: 1716

Answers (5)

Jim Petkus
Jim Petkus

Reputation: 4508

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.

Upvotes: 0

Jeremy DeGroot
Jeremy DeGroot

Reputation: 4506

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

Upvotes: 2

James
James

Reputation: 12796

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.

Upvotes: 0

Chris Ballance
Chris Ballance

Reputation: 34337

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

Upvotes: 0

Alex Wayne
Alex Wayne

Reputation: 186994

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

Upvotes: 0

Related Questions