file upload javascript validation

**vineet** · 10-09-2008, 12:34 PM

hi all

i m using this below script to validate the file to be upload if its extension is .jpg, .gif or .doc.

this script works fine in Internet explorer but doesnot work in firefox 3.

can anyone give me an alternative or tell what to add in it.

Code:

<script language="javascript">
function Checkfiles()
{
var fup = document.getElementById('filename');
var fileName = fup.value;
var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
if(ext == "gif" || ext == "GIF" || ext == "JPEG" || ext == "jpeg" || ext == "jpg" || ext == "JPG" || ext == "doc")
{
return true;
} 
else
{
alert("Upload Gif or Jpg images only");
fup.focus();
return false;
}
}
</script>

**jscheuer1** · 10-09-2008, 01:38 PM

The script code looks, though a bit clunky, like it should work cross browser. I take it this keys off of a form with a:

HTML Code:

<input type="file" id="filename">

element in it, right?

In any case, access to the value property of file inputs is severely restricted due to security reasons. In some browsers this can even frustrate the most innocent seeming code. But to really get an idea of why there is a problem in this particular case, we would need to see the page, or at least the form, including the code that shows how your function is invoked from it.

Note: Though very unlikely to be the problem, the language attribute has been deprecated for the script tag, and the type attribute is now required, use:

Code:

<script type="text/javascript">

not:

Code:

<script language="javascript">

Added Later:

Your script code worked fine with this test form:

HTML Code:

<form action="#" onsubmit="return Checkfiles();">
<input type="file" id="filename">
<input type="submit" value="Go!">
</form>

**thetestingsite** · 10-09-2008, 01:43 PM

The best way to accomplish this task is by validating on the server side. Anyone can turn javascript off and get around any client side validation easily.

Hope this helps.

**jscheuer1** · 10-09-2008, 01:59 PM

Originally Posted by thetestingsite

The best way to accomplish this task is by validating on the server side. Anyone can turn javascript off and get around any client side validation easily.

Hope this helps.

True, but that wasn't the question. And client side validation and other code can take the load off of the server and/or smooth the user interface when available.

I agree that if this is at all important, there should at least be server side fall back validation. The scenario I envision for this sort of thing would be to validate on the client side. If it passes that, it will pass the server side. If not (no javascript available, or the user has tinkered with the code), the server side denial will kick in where required.

**jscheuer1** · 10-09-2008, 02:31 PM

After playing around with this a bit more, I discovered something interesting about the way that FF 3 treats file inputs. I also simplified the code and tied it to the form for backward compatibility:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function Checkfiles(f){
 f = f.elements;
 if(/.*\.(gif)|(jpeg)|(jpg)|(doc)$/.test(f['filename'].value.toLowerCase()))
  return true;
 alert('Please Upload Gif or Jpg Images, or Doc Files Only.');
 f['filename'].focus();
 return false;
};
</script>
</head>
<body>
<form action="#" onsubmit="return Checkfiles(this);">
<input type="file" name="filename"> 
<input type="submit" value="Go!">
</form>
</body>
</html>

Now, what I discovered about FF 3 and file inputs is that, although it will not cause an error, FF 3 will not allow you to put the focus on the file input. This is just the nature of how file inputs are done in FF 3. If focus is put on the file input by the user, FF 3 reacts in the same way as if the browse button were clicked. The text field part of the file input is always readonly.

**vineet** · 10-09-2008, 02:34 PM

hi john

you were right. the "id" keyword was missing in my form. its now fine.

one thing more i would like to ask that can we add a function in the script that will check the "file size" of the file to be uploaded.

thanks
vineet

Originally Posted by jscheuer1

The script code looks, though a bit clunky, like it should work cross browser. I take it this keys off of a form with a:

HTML Code:

<input type="file" id="filename">

element in it, right?

In any case, access to the value property of file inputs is severely restricted due to security reasons. In some browsers this can even frustrate the most innocent seeming code. But to really get an idea of why there is a problem in this particular case, we would need to see the page, or at least the form, including the code that shows how your function is invoked from it.

Note: Though very unlikely to be the problem, the language attribute has been deprecated for the script tag, and the type attribute is now required, use:

Code:

<script type="text/javascript">

not:

Code:

<script language="javascript">

Added Later:

Your script code worked fine with this test form:

HTML Code:

<form action="#" onsubmit="return Checkfiles();">
<input type="file" id="filename">
<input type="submit" value="Go!">
</form>

**jscheuer1** · 10-09-2008, 02:49 PM

As far as I know, there is no way to get the file size via javascript. IE has some way I believe - for images only, but if so, it is proprietary to that browser, and the file would need to first be uploaded. Dimensions can be gotten for images cross browser, but only after the file has been uploaded. So I would say that this part of your validation would need to be carried out on the server side.

Virtually all browsers have access to file sizes, but this isn't accessible via javascript.

**vineet** · 10-09-2008, 02:49 PM

hi

i tried the server side validation. In that case If i upload a 5mb file then the validation will work when the total 5mb file gets loaded on the server and then it will give the message whether the file is .doc or .jpg

its can annoy any user who is uploading the heavy file on clients website. the user should get alert on clicking the submit button.

vineet

Originally Posted by thetestingsite

The best way to accomplish this task is by validating on the server side. Anyone can turn javascript off and get around any client side validation easily.

Hope this helps.

Thread: file upload javascript validation

Thread Tools

Search Thread

file upload javascript validation

upload validation

file type validation

Bookmarks

Bookmarks

Posting Permissions