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

Question

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.

Unfortunately, this is something that's not yet cross platform without using plugins (e.g., flash). http://www.w3.org/TR/FileAPI/ are the working specs that are supported by Firefox. — Matthew, Mar 19 '10 at 04:05
Duplicate: http://stackoverflow.com/questions/158149/how-do-you-restrict-the-size-of-a-file-being-uploaded-with-javascript-or-java-w — , Mar 20 '10 at 10:36
See [this newer question and answer.](http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation) In modern browsers this is possible without a request to the server, though the validation has to be done on the server as well anyway. — Pointy, Oct 21 '15 at 17:36
@geowa4 oh, sorry; I didn't mean to imply that there was anything wrong with your observation. I just thought it'd be useful to have a link to the newer question. — Pointy, Oct 23 '15 at 01:42

score 2 · Accepted Answer · answered Feb 13 '09 at 19:22

2

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

answered Feb 13 '09 at 19:22

Jeremy DeGroot

4,496
2
20
21

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 Sep 29 '09 at 13:22
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 Oct 06 '09 at 00:13

score 0 · Answer 2 · answered Feb 13 '09 at 19:19

0

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

answered Feb 13 '09 at 19:19

Alex Wayne

178,991
47
309
337

1

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. – Matthew Mar 19 '10 at 04:03
If anything, this statement is an indictment of Flash. – Shaggy Frog Sep 16 '10 at 01:34
i dont even know how i got here but.. today.. its possible in all major browsers ;D – GottZ Oct 21 '15 at 17:34

score 0 · Answer 3 · edited Feb 13 '09 at 19:22

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.

score 0 · Answer 4 · answered Feb 13 '09 at 19:21

0

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

answered Feb 13 '09 at 19:21

Chris Ballance

33,810
26
104
151

score 0 · Answer 5 · answered Feb 13 '09 at 19:23

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.

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

5 Answers5

Linked