IE 5+ Workaround Needed

caclark

06-03-2005, 01:52 PM

I have a simple file extension function (shown below) but I need to use an "onblur" call of my function from a form file input (use this approch because form field is not always visible on the page, so I can't use "onsubmit" because the field will not always be used).

Now back to my question. IE seems to "lose focus" when the file chooser is displayed. And hence my function executes and as designed in the function an Error message is displayed. I have no problems in any other browsers (Mozilla, FireFox) but my primary audience still uses IE.

Any help to aleviate this problem in IE would be appreciated.

JS Function:

function verifyFileType(fieldValue,delimiter,allowExtsArray,alertText,reloadPage){

if(fieldValue.split(delimiter).length<2){
alert("No File Extension Given!\n Please Retry The File Name Again.");
return false;
}
var parts=fieldValue.split(delimiter);
var lowerCaseParts=parts[1].toLowerCase();
var validExt="no";

for (i=0;i<allowExtsArray.length;i++){
if(lowerCaseParts==allowExtsArray[i]){
validExt="yes";
return;
}
}

if(validExt=="yes"){
return true;
}
else {
alert(alertText);
if(reloadPage==1){
window.location.reload();
}
return false;
}
}

Page Input:

<form name="fileUploadForm" enctype="multipart/form-data" method="post">
<span class="s-txt"><b>Enter Filename</b></span>
<input type="file" name="fileName" size="40"
onblur="return verifyFileType(this.form.fileName.value,'.',['txt','log'],'Invalid File Type. \n\n Must Be A Text File. With A \(.txt or .log\) Ending.',0)">

<p><input type="submit" value="Upload File">
  <input type="reset" value="Clear Form">

</form>

martin_narg

06-03-2005, 02:17 PM

Hi mate,

I think this is what you are looking for, it checks the file extension when the form is submitted, with the appropriate alerts if the form input element type is anything other than hidden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
function checkFileExtension(objFile, arrAllowedExtensions) {
var strAlert = "Invalid file type\n\nFile type must end " + arrAllowedExtensions.join(" or ");
var strExtension = objFile.value.substring(objFile.value.lastIndexOf("."), objFile.value.length);
for( var i=0; i<arrAllowedExtensions.length; i++ )
if( strExtension == arrAllowedExtensions[i] )
return true;

if( objFile.type != "hidden" ) {
if( strExtension.length == 0 )
alert("Please select a file");
else
alert(strAlert);
}
return false;
}
</script>
</head>

<body>
<form name="fileUploadForm" enctype="multipart/form-data" method="post" onsubmit="return checkFileExtension(this.fileName, ['.txt','.log']);">
<span class="s-txt"><b>Enter Filename</b></span> <input type="file" name="fileName">
<p><input type="submit" value="Upload File">  <input type="reset" value="Clear Form">
</form>
</body>
</html>

Hope this helps.

m_n

caclark

06-03-2005, 02:28 PM

Thanks martin,

But the function I have works great! My problem is I can't use an "onsubmit" in my form (the input will not always be used (hidden until another option is selected) I did not show that part of the code). I need to get around the "false" focus loss of the form field in IE.

martin_narg

06-03-2005, 03:19 PM

I've updated the script so that if there is no input form element found then the form simply submits. if an input element is found, it validates the extension accordingly. It will only alert messages to the user if an input element is found and it is not a hidden input element (ie if it is type text or file) or it's visibility is hidden.

I appreciate that your script worked the way you wished it to in the other browsers, however I found it was pumping out the alert boxes every time i was switching windows and doing other stuff on my computer. This is because using onblur() is very indiscriminate in this case. An onsubmit event is much more specific to the task at hand. Plus, of course, your script didn't work for IE ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
function checkFileExtension(objForm, strFileElementID, arrAllowedExtensions) {
try {
var objFile = objForm.elements[strFileElementID];
var strAlert = "Invalid file type\n\nFile type must end " + arrAllowedExtensions.join(" or ");
var strExtension = objFile.value.substring(objFile.value.lastIndexOf("."), objFile.value.length);
for( var i=0; i<arrAllowedExtensions.length; i++ )
if( strExtension.toLowerCase() == arrAllowedExtensions[i] )
return true;

if( objFile.type != "hidden" || objFile.style.visibility == "hidden" ) {
return true;
else {
if( strExtension.length == 0 )
alert("Please select a file");
else
alert(strAlert);
}

objForm.reset();
return false;
}
catch(e) {
return true;
}
}
</script>
</head>

<body>
<form name="fileUploadForm2" enctype="multipart/form-data" method="post" onsubmit="return checkFileExtension(this, 'fileName2', ['.txt','.log']);">
<span class="s-txt"><b>Enter Filename</b></span> <input type="file" name="fileName">
<p><input type="submit" value="Upload File">  <input type="reset" value="Clear Form">
</form>
</body>
</html>

This code was tested in IE, Firefox and Opera successfully.

Hope this helps

m_n

caclark

06-03-2005, 04:18 PM

Thanks martin_narg, That's what I needed. :thumbsup: