Validate file size prior upload

smoreau — Thu, 26 Aug 2010 20:53:37 +0000

If I ask you what is the most complex thing in HTML, what would you reply?
For me, it would be the file upload (or maybe character encoding, but this is not the topic! ).

One of the problem around the file upload functionality is that there is, no matter what, a file size limit set on the server. The limit could be 100Kb such as 100Mb depending on the configuration of the server.
But what happens if the user tries to upload a file bigger than the limit?
It’s simple, the file is going to be uploaded on the server until the limit is reached. Once it happens, the server returns an error message to the client.
Well, this is not ideal!
Indeed, depending on the connection speed of the user, the error message could be displayed a few minutes later. And you know how impatient users are!

So obviously, the solution would be to validate the file size before the upload starts.
To do that, we can simply use the fileSize Javascript function against the upload field.
But, surprising enough, this function doesn’t work on Internet Explorer!

And the only solution I found to get the file size with IE was using ActiveX:

var oas = new ActiveXObject("Scripting.FileSystemObject");
var e = oas.getFile(document.forms[0].file.value);
var size = e.size;

Finally, here is the whole Javascript function to validate the file size:

function validateFileSize(file, maxSize) {
	if (navigator.appName=="Microsoft Internet Explorer") {
		if (file.value) {
			var oas = new ActiveXObject("Scripting.FileSystemObject");
			var e = oas.getFile(file.value);
			var size = e.size;
		}
	} else {
		if (file.files[0]!=undefined) {
			var size = file.files[0].fileSize;
		}
	}
	if (size!=undefined && size > maxSize)
		return false;
	return true;
}

with file the file input field to validate and maxSize the maximum size in bits.

For example, you can call this function as follow:

validateImageSize(document.forms[0].file, 500000)

I successfully tested this code on:

Google Chrome 6;
Firefox 3.6;
Internet Explorer 6;
Internet Explorer 7.

Onclick event is not fired on IE

smoreau — Tue, 08 Dec 2009 23:05:58 +0000

I am pretty sure everybody knows that Internet Explorer has “a few” bugs…
You didn’t? Alright, better to stay on your little cloud and leave this blog right away!

For the others, I will talk about the JavaScript event onclick which is not fired when the following requirements are matched:

In a form;
There is only ONE input text element;
There is one button which has an onclick event assigned;
You press the ‘Enter’ button inside the input text element.

For a better understanding, let’s now take the following example:


    Test

As you can see, there is nothing difficult in this code.
Well, that doesn’t mean Internet Explorer can handle it…

The bug occurs if you press the ‘Enter’ button inside the input text element using Internet Explorer. Indeed, the onclick event is not fired and the text ‘onclick fired!’ is not display to the user! However, it works perfectly fine on Firefox and Safari.

The funny thing is this code works on Internet Explorer if you add another input text, even if it is hidden!
Why? Don’t ask me!

Anyway, the following example works on IE:


    Test

Why are we assigning an onclick event to the submit button?
It could be for a lot of reasons, but the main one is probably to validate the form before submitting the data.

By the way, RichFaces is very often using this event on the submit buttons.
So remember to add a hidden input text to your form if you want to allow users to use the ‘Return’ key.

LogikDevelopment » Internet Explorer

Validate file size prior upload

Onclick event is not fired on IE