Using Javascript to check the file size of an upload in Internet Explorer

A very common feature in most web applications is the ability to upload files to the server. One of the most common requirements with this feature is to restrict the file size that can be uploaded.

This is very easy to do on the server side and is well documented.

On the client side however, it isn’t a well documented.

With HTML5, this is a lot easier, however IE versions up until version 9 does not natively support this and you need to resort to using ActiveX. This is unlikely to work on too many public websites but in an Intranet environment, this would be a very useful feature to implement.

Lets break this down.

You first need to instantiate a new File System ActiveX object from based on “Scripting.FileSystemObject”. From there you can then access the file to get the file information by using the getFile method of the File System ActiveX object with the full path of the upload file. With that you can then check the size or any other file information you want that is available from the File ActiveX object.

So how does this look like in code?

var fso = new ActiveXObject("Scripting.FileSystemObject");
var filePath = fileUploadControl[0].value;
var file = fso.getFile(filePath);
var fileSize = file.size;

There is one caveat, though, which is why I said that this will most likely only be useful in an Intranet environment. What is that? Well IE needs to be updated so that the Security settings for ActiveX controls and plug-ins. What needs to be changed is the setting “Initialize and script ActiveX controls marked as safe for scripting” from “Disable” to either “Enable” or “Prompt”. Setting it to “Enable” means the user won’t even no.

In a future post, I’ll show how to do this using HTML5.

Hope this helps.