Getting onChange to work with FF and IE

Hi all –

[U]Situation: [/U] I’ve developed a support page where users can drop in help tickets with javascript doing client side testing of the fields for missing data etc and php for server side handling and posting to an email address.
There is also a section to add supporting images, videos etc of the bug/issue using the <input type=”file” /> tag.

Although I could have done server side file size checking, I didn’t want my users to wait half an hour to up load a 10Mb video just to be told it was too large to send via email.

So my client side solution was to have a function fire when a file is selected:

[CODE]<input type=”file” id=”attachment1″ name=”attachment[]” onchange=”findSize(1)” />[/CODE]

The id is name 1 because I have javascript to allow the user to add multiple “Select a file” boxes, dynamically adding 1 to the id number each time. The name is an array for the server side handler of the multiple files (if any). The onchange you see fires “findSize(attachmentRef)”.

[CODE]function findSize(id) {
var maxFileSize = 5242880; //5mb in bytes

var idNumber = id;
var fileInput = $(“#attachment”+idNumber)[0];
if(fileInput.files[0].fileSize > maxFileSize) {
//this file is greater than 5mb – warn the user
alert(“This file exceeds the 5Mb limit – please click Choose File and reselect or compress the file.”);
//set the alert flag so that the user cannot accidentally still upload a large file
document.forms[“send”].elements[“attachmentsGoodToGo”].
value = 0;
}
else {
document.forms[“send”].elements[“attachmentsGoodToGo”].
value = 1;
}
}[/CODE]

This is the findSize function that feeds back to the user instantly if the file is too big for processing – saving headaches all round. I use some jQuery to work out which file input we are looking at and to test the size of the file. If the file is too big, an alert flag is written into the form to prevent the user from hitting submit (one of my client side test conditions for checking the form confirms that this flag is 1 not 0).

[U]Issue:[/U] The code works fine on my test browser – Chrome. But in my next step test (FF 7.0.1 and IE9) nothing happens. I can locate and add a file for upload, but the onchange doesn’t fire. Or is it something in my function that is causing the bug? I’m using jQuery 1.4.4 for your info.

[U]Solution:[/U] I’ve seen many examples of how to implement onchange with different browsers – something about IE and FF differing in what they mean by a change and when it happens; but I admit I’m a bit lost. Can any one spell out a solution ABC fashion?

cheers

frank

Also in #JavaScript _↴