Check for file size with JavaScript before uploading

by Yang Yang on January 1, 2009

File uploading is a rather common feature of interactive sites. As all servers come with a limit on the size of the file being uploaded, it would be a usability blessing for users if web developers can implement a logic to check for the file size before uploading, informing the user if the size of the file exceeds the max allowed.

At the server side, it’s easy to weigh the file in bytes, with PHP, ASP or JSP. However it would be waste of resources if one can only check the size of the file that has already been uploaded because there’s no point to it if he is trying to inform the user if the file is too large.

So can this be done on the client side?

Internet Explorer

Yes, but partially and indecently. JavaScript is built with client safety in mind thus given no clearance to access client file system, falling unable to get the size of any chosen file. VBScript, on the other hand, can return the size of any client file with the help of ActiveX Object, the Microsoft proprietary scripting API.

Consider the code below:

<html>
<head>
<script>
function getSize()
{
	var myFSO = new ActiveXObject("Scripting.FileSystemObject");
	var filepath = document.upload.file.value;
	var thefile = myFSO.getFile(filepath);
	var size = thefile.size;
	alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="button" value="Size?" onClick="getSize();">
</form>
</body>
</html>

Rather gross and obselete code with regard to modern front end coding standards, though it does the job. Run it on IE, select a file and click “Size?”, the browser alerts with the size of the file.

file size got by javascript

For IE, it’s the only way I know as of now that successfully checks the size of a given file completely on client side.

Firefox, Chrome, Opera, Safari, etc.

Now from hell to heaven, it’s much more doable than you may think. And it should be this way. For a file upload control like this:

<input type="file" id="myFile" />

With jQuery and the HTML5 File API specification implemented, you can use this simple snippet to access file properties such as size:

//binds to onchange event of your input field
$('#myFile').bind('change', function() {
	alert(this.files[0].size);
});

Thanks to Felipe Sabino for this solution.

Subscribe to Kavoir: blog feed

You should also read:

indy January 15, 2009 at 12:32 pm

no effect on google chrome browser.

ie 7 – requests to run active x object but didnt work might have to tweak a bit

Eugenio January 20, 2009 at 11:00 am

Maybe you should use a swf and pass the file through a flash var and return the filesize through a javascript in the flash element

Yang Yang February 26, 2010 at 3:25 pm

That’s the way!

Gautam May 4, 2009 at 7:42 pm

It’s Not working i have to upload multiple files.I just add the files in temporary using javascript but it’s Not working it’ll give error ActiveXObject object is not define.

saleem March 1, 2010 at 4:14 am

Same err for me too..do u get the result for thi sbug.. if so pls sent the solution to saleem.hbs@gmail.com

asian dating lover May 18, 2009 at 2:41 am

This is tough to do with the security restrictions. If anyone has another way that works in FF – Opera and IE without active-x, that would make my day. Checking server side is not only a waste of resources but leaves you open for DOS attack.

Yang Yang February 26, 2010 at 3:25 pm

Really? dos attacks?

Craig October 13, 2011 at 5:34 am

Of course, they just upload 100 20GB files at once to your site, tying up all your server threads for an inordinate period of time and possibly taking down the server entirely.

tester January 7, 2010 at 1:25 am

This site is doing it somehow in Firefox and Safari but not in IE and Crome: ajaxbrowser.com

Yang Yang March 1, 2010 at 11:56 am

Hi, everyone thanks for leaving comments, but as I stated in the post, this can only be done partially and indecently. It’s impossible to implement a feature like this across all major modern browsers because that’d be a security problem which many other browsers frown upon. JavaScript is not designed to access local computer hard disk in any way so that visitors cannot be hacked by any website.

ActiveXObject is an IE proprietary object that thus far is able to do this. So this trick only works in IE. I’ve just done yet another test and taken the screenshot above. It does work.

Alexander Amelkin December 28, 2012 at 3:38 pm

I really don’t get it why knowing the file size of a file that the user _has_already_deliberately_chosen_ for upload to a remote server (where it can be inspected, hacked, reverse engineered and overall compromised in any way the server likes) is considered a security violation. Why at all people keep calling it an “access to a local filesystem” when in fact it’s just an access to the basic properties of a Javascript object (the file becomes one as soon as the user chooses it). Why accessing the name of the file is not a security breach, and accessing its size is? Can you explain that?

Sudhir May 5, 2010 at 1:03 pm

ActiveXObject only works in IE… not in mozilla….

md June 7, 2010 at 5:22 pm

upload file even space is there (java script)
example “a.doc” it is working fine but i want to upload file “a .doc “

Timothy (TRiG) September 20, 2010 at 6:42 pm

There are three methods:

1. ActiveX: Works only in IE, and doesn’t work nicely even there (gives a security warning).

2. Flash (or perhaps Java): It seems silly to use a plugin just for uploading files.

3. HTML5 and JavaScript: Not yet widely adopted. Works in newer versions of Firefox and Chrome. Good tips available on the Mozilla developer blogs.

TRiG.

Yang Yang September 21, 2010 at 12:09 am

Great sum-up, Tim!

T. Krishna Chaitanya October 16, 2010 at 1:07 pm

I think action script is the right way to check the file size at client side. But we have to force the user to install flash plugin in the browser.

Forcing the user is the right approach because instead of just uploading it to the server and checking the file size and breaking the request and asking him to upload the specified size file is somewhat time consuming. Because prevention is better than cure.

What you say.

Regards,
kittu_564@yahoo.in

George November 15, 2010 at 8:19 pm

Hi!

I have a question: I copy-pasted your code into 2 files, “test.html” and “test.php”, both in the root of my localhost server (I use xampp). These files contain nothing but your code.
The problem is that in .php file, the active x doesn’t run. I receive the error:
“Error: Automation server can not create object”.

I repeat, in the .html file it works, in .php doesn’t. Do you have an idea why this is happening?

Please send me an email when you post a reply.
Thanks and keep up the good work!

George November 15, 2010 at 8:31 pm

I tested more and it seems that no file works if it is in the root folder of my local server.
If I move the .html file outside of this folder (ie on the desktop) it work. :( this is very annoying.

Do you have any ideeas how to make this work?

Viswanath December 29, 2010 at 2:40 pm

when you the upload the file of size more than 25MB in gmail attachements, it does the client side validation and shows the popup. It works both in IE and FF.
Let me know if any one has idea how gmail attachement file size limit works.

James July 19, 2011 at 4:18 am

Its a Flash Based solution, If you use a non flash browser,or device, gmail will revert back to a traditional solution of uploading until the max size is reached and then, if too large gmail will then proceed in letting you know your files are too large!

shyam February 25, 2011 at 2:48 pm

Hi

I hav 1 pblm in this case.The Error is ” automation server can’t create object “.

pls reply a solutiom

tams August 8, 2011 at 2:32 pm

I have copied this code into a html page and tested, and it shows an error called:
“Automation server can’t create object”

Mohan March 12, 2012 at 7:04 pm

The above code will work only if security level on IE is kept to a LOW. Otherwise the ActiveX popup will not be shown

Salsan @ India October 20, 2011 at 3:47 pm

Its only working on Internet Explorer.

siva November 8, 2011 at 3:09 pm

Error: ActiveXObject is not defined
Source file: http://localhost/projects/gold_house_furniture/admin/adproductadd.php
Line: 58

Ed December 8, 2011 at 6:19 am

This is a pretty obsolete solution, any modern web developer I know would find this laughable.

Mike February 13, 2012 at 5:29 pm

So instead of laughing, why not try to help?

For example, by giving a better solution.

Dhaval Vithalani February 7, 2012 at 6:50 pm

i am sorry but this code is not working in mozila firefox.. it’s properly working IE.
what can i do???
please do the needfull.

Thanks

BASKER March 14, 2012 at 3:23 pm

Hi friends,

ActiveXobject is working on IE Only. I want run all browsers.

It is possible means please provide me BOSS.

BASKER March 14, 2012 at 6:50 pm

Pongapa Ethuume run agala

oru browser support panna oru broser support panna matenguthu

Ponagapa code iruntha anupunga

vivek May 6, 2012 at 1:54 am

is there any way to check file size in JavaScript without using ActiveX Object for IE ?

-Thanx in advance

Spamme May 11, 2012 at 3:37 pm

I can’t believe it, so much people that can’t just google ;)

It is possible with javascript in Firefox, Chrome, Opera and Safari but it doesn’t work in IE (as always, the worst browser ever!)

Here some documentation from MDN:
https://developer.mozilla.org/en/DOM/FileList
https://developer.mozilla.org/en/DOM/File

And here a small javascript example:

Ravi July 13, 2012 at 7:47 pm

Not Working on IE9
Its really embarrassing.

sachin August 23, 2012 at 4:42 am

it will work guys!!! u jus have to include jquery library in ur code!!
here is the link u can get the library!!
http://jquery.com/

jus select download….a page opens… right click n select ‘save as’

den jus include this file in ur code jus like any other external javascript.

and it will work!!!

Thomas October 2, 2012 at 6:23 pm

Works for me in the modern browsers listed above.
A shame it doesn’t work in IE though.

Comments on this entry are closed.

Previous post:

Next post: