Results 1 to 8 of 8

Thread: file upload javascript validation

  1. #1
    Join Date
    Jun 2008
    Posts
    114
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default file upload javascript validation

    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>
    Last edited by jscheuer1; 10-09-2008 at 01:39 PM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 10-09-2008 at 01:52 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    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.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by thetestingsite View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 10-09-2008 at 02:43 PM. Reason: change id to name for greater compatibility
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jun 2008
    Posts
    114
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default upload validation

    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

    Quote Originally Posted by jscheuer1 View Post
    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>
    Last edited by vineet; 10-09-2008 at 02:38 PM. Reason: forget something to ask

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jun 2008
    Posts
    114
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default file type validation

    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

    Quote Originally Posted by thetestingsite View Post
    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •