logo

Limit the types of files users can upload

The following JavaScript function can be used to validate that the type of file that a user tries to upload is of a certain format. It does this by checking that the files extention (eg .html) is in an array of allowed extensions that is passed to the function as an argument.
<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;

dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];

return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') :
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>


You can test it using the file upload below which will only accept image files that end in either .gif, .jpg or .png:



You can then call the function from an event like the onClick of the above button, which looks like:

onClick="TestFileType(this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);"


or, alternatively, you could put it in the onChange event of the file upload element.

Note that the above example assumes that you know the "name" attribute of the file upload element. In domino R5 you can do this to an upload by putting a name in its HTML attributes. In R4 you cannot do this so you can either create the upload yourself by using the following pass-thru html

<input type="file" name="uploadfile">

Otherwise you would need to loop through all elements on the form looking for any input of type "file" and then validating this. This method is demonstrated here.

Note: This is not entirely foolproof as people can easily change the extension of a file before uploading it, or do some other trickery, as in the case of the "LoveBug" virus.

Feedback

  1. FIle Upload

    When I assign a name to the file upload the submit fails. My guess is that it has to do with a name on the web page that domino does not have listed - similiar to creating a field using html and not having a NOTES equivlant on the form.So, I tried creating a NOTES field with that same name and the form submitted by failed to attach the item. (The trick to create textarea fields)How does on get around this?

    1. Re: FIle Upload

      Good question, "how can i work with this when i use the default Domino file upload facility ?

      If i look in the code Domino generates something like:

      input type="file" name="%%File.c1256c850038f824.81a1da37dba5ee80c1256cda0039990c.$Body.0.2726"

      Show the rest of this thread

    2. Re: FIle Upload

      Hi! Nice Script.

      I have a Question How to verify if a file selected by user exsist on the user system using javascript.

      Lets says user select's a file and the user has no rights to copy/execute/read permission to that file,or simply the user changes the exetension of the file in the textbox.

      Then how to verify before saving the document using javascript.

      Show the rest of this thread

    • avatar
    • Charlotte
    • Thu 13 Nov 2003

    Unable to check Gif files

    Something that I discovered, it can't check the gif files.

      • avatar
      • Jake
      • Thu 13 Nov 2003

      Re: Unable to check Gif files

      You're right Charlotte. My mistake ;o)

      The line: return (fileTypes.join(".").indexOf(fileType) != -1)

      Generates and test the following string for the existence of ".gif"

      "gif.jpg.png.bmp"

      Obviously the .join() is not addding a period at the beginning. I'll leave this to you to work out how...

      Jake

      Show the rest of this thread

  2. failed in this case...

    This particular script failed or rather incorrectly thought that the following file was bad: D:\Temp\folder.name.exe\somethingexe.txt

    The path is admittedly ridiculous but as another site said 'God is always building a better idiot'.

      • avatar
      • Jake
      • Wed 25 Feb 2004

      Re: failed in this case...

      Woops. Got to admit I never thought of catering for folders with .s in the name.

      The thing to do here is explode on the "\"s before you explode on the "."s...

      Jake

  3. Is it possible to restrict no of attachment on web

    Hi,

    Is it possible to restrict no of attachments on web without using setting in server document.

    RIshi

  4. javascript file upload validation

    I have a form which is uploading a file. I want to use javascript to validate the file by making sure it isn't to big (not exceeds more 50 chars) and that it is of proper file type(*.zip. Unfortunetly I have no idea of how to go about validating either of the two things I need validated.

    I've searched using google for the answers and have found many pages of nothing or "sign up to find the solution" so any help would be greatly appreciated

    1. Re: ASP file upload validation

      Dear check it out it may help u.

      Or u can use Reqular expression validator for the purpose

      if (FileUpload1.HasFile) { string[] FileExt ={ ".exe", ".txt", ".dat", "EXE", "TXT" }; for (int i = 0; i < FileExt.Length; i++) { if (UpPath.Contains(FileExt[i])) { chk = false; }

      } if (chk == false) { Filemsg.Text = "Invalid File Format"; } else { FileUpload1.SaveAs(UpPath); Filemsg.Text = "File Uploaded Succesfully"; FileName.InnerHtml = FileUpload1.PostedFile.FileName; FileType.InnerHtml = FileUpload1.PostedFile.ContentType; Size.InnerHtml = Convert.ToString(FileUpload1.PostedFile.ContentLength); FileDetail.Visible = true; } } else { Filemsg.Text = "Uploading Failed! Select some file to Upload"; FileDetail.Visible = false; } }

    2. Re: javascript file upload validation

      I want code to make validation in FileUpload to check the type of the file I want to upload and if there is file to upload or its empty

      regards

      Show the rest of this thread

    3. Re: javascript file upload validation

      Sir , I want to validate a upload file field and want to check that it only allow to pdf file to upload.

    4. Re: javascript file upload validation

      Show the rest of this thread

      • avatar
      • sad
      • Thu 26 Feb 2009

      Re: javascript file upload validation

      asdf

    • avatar
    • Ade
    • Mon 2 Apr 2007

    Nice script

    Hello !!!

    thanks for this nice script !! :-)

    Does some one know how to check also the file-size? (for example: to give an alert in the case the file is above a certain limit. )

    • avatar
    • Michael
    • Fri 18 May 2007

    check for non-web characters

    Hi, another good idea is to check for "ugly" characters in the filename that prevent the attachment from being able to be opened. "Ugly" means non-english characters.

    Just encode the filename (means: translate to unicode) and check if it is the same as the original. But don't care about spaces.

    // replace a space with something harmless var file_nameC = file_name.replace(/ /g, "a"); if (encodeURIComponent(file_nameC) != file_nameC) error_feld = error_feld +'\n\t Characters found in filename not suitable for webaccess!';

    Michael

    • avatar
    • arry
    • Fri 13 Jun 2008

    not working

    your function is not working on ur site

      • avatar
      • Jake Howlett
      • Fri 13 Jun 2008

      Re: not working

      Woops. Fixed now. Thanks for letting me know.

    • avatar
    • Justen
    • Sun 22 Feb 2009

    Some bugs, fixed

    function TestFileType( fileName, fileTypes ) {

    if (!fileName) return;

    dots = fileName.split(".");

    //get the part AFTER the LAST period.

    fileType = "." + dots[dots.length-1];

    return ('.'+fileTypes.join(".").indexOf(fileType) != -1) ?

    alert('That file is OK!') :

    alert("Please only upload files that end in types: \n\n ." + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");

    Missing a semicolon at dots = fileName..., I know that's not a big deal, also included the initial '.' before the fileTypes.join and in the alert box for cosmetic purposes. Otherwise the first file type in the file array sometimes gets ignored.

    Tangentially, if you want to be able to clear the file input box: IE won't let you change the value of an input type=file box directly, so you need to delete the input element and replace it with a fresh new element. If you want it to trigger automatically, bind it to the 'change' event, either by using the inline onchange='' attribute or using your event binding method of choice.

      • avatar
      • Justen
      • Sun 22 Feb 2009

      Oh, another thing

      return ('.'+fileTypes.join(".").indexOf(fileType.toLowerCase()) != -1) ?

      Replace as above, indexOf is case sensitive so this should help with that :)

  5. Slight change to get this working

    Hi All,

    Great little function.

    I had a small problem with this still submiting the form no matter what the outcome. I needed to 'return' the function for it to know that I'd stopped the form submit.

    onClick="return TestFileType(this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);"

    • avatar
    • George Drakou
    • Wed 10 Feb 2010

    hello :),what happen if try to upload image with this name "test.ff.png" ?

    You get a wrong result :)

    Just get the lastIndexOf('.') then used the subString(), and then split into array :)

      • avatar
      • Jake Howlett
      • Thu 11 Feb 2010

      From the code above (which btw is almost 10 years old!):

      dots = fileName.split(".")

      //get the part AFTER the LAST period.

      fileType = "." + dots[dots.length-1];

      It already caters for multiple dots :)

    • avatar
    • Matt
    • Wed 23 Jun 2010

    Hello everyone... I did a few modifications for our site and thought I'd share it with you all. The only thing I just found out is IE doesn't fire off the check so I'm looking into that. If anybody knows why feel free to reply. :)

    function TestFileType(fileName, fileTypes) {

    var myReturn = false;

    if (!fileName) return;

    dots = fileName.split(".");

    //get the part AFTER the LAST period.

    fileType = dots[dots.length-1];

    if (fileTypes.indexOf(fileType) != -1)

    myReturn = true;

    else{

    alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");

    document.getElementById('cf_file').value = '';

    }

    return myReturn;

    }

    cfinput/input attribute call: onChange="TestFileType(this.form.cv_file.value, ['doc', 'docx', 'pdf']);"

    I chose to use onChange instead of onClick or onBlur. onChange checks it after making the selection. onClick wouldn't work in FF or IE and onBlur only worked after you left the field in FF (didn't work at all in IE)

    I also chose to do the if else instead of the ? : simply because I couldn't get it to do what I wanted it to do (clearing the field after sending the alert) and as far as the message being okay I didn't need to send a file is ok alert. Nevertheless this has helped greatly, thank you everyone for your input and for the original code! We'll be using this more I'm sure. :) That way we can try and prevent everything having to be checked on the server side.

  6. CODIGO FINAL

    function checkTipoFileInput( fileNombre, fileTypes ) {

    /*Ejemplo de uso desde un evento Click

    * onClick="return checkTipoFileInput(this, ['gif', 'jpg', 'png', 'jpeg']);"

    */

    // Existe este file input

    if (fileNombre.value.length<3){

    fileNombre.value='';

    fileNombre.setAttribute('type', 'input');

    fileNombre.setAttribute('type', 'file');

    return false;

    }

    dots = fileNombre.value.split(".");

    fileType = "." + dots[dots.length-1];

    if(fileTypes.join(".").indexOf(fileType) != -1){

    alert('OK, es un archivo permitido.');

    return true;

    }else{

    alert("Por favor, sólo se pueden subir archivos de tipo: \n\n" + "."+(fileTypes.join(" .")) + "\n\nPor favor, seleccione un nuevo archivo y vuelva a intentarlo.");

    fileNombre.value='';

    fileNombre.setAttribute('type', 'input');

    fileNombre.setAttribute('type', 'file');

    return false;

    }

    }

    SALUDOS ;-)

    • avatar
    • Pete
    • Thu 13 Jan 2011

    How do I validate the fileType by case insensitive?

  7. Hello Jake Howlett,

    Greetings!

    I got your contact from notes.net.

    I am the first time user of FileUpload Control. In my application, there is a master notes database, in which I added this new Fileupload control to a form. But the documents are actually saved in another sub-database via webQuerySave Agent. I chosen the file and then when I click save button, the webQuerysave agent gets triggered and while executing the below code snippet, of WebQuerySave Agent, v2FileNames(0) returns null value only. I am actually trying to get the object embedded and reattach it to the subdatabase document while saving it. But attachment is not returned. If you could reply with modified code snippet/approach/screenshots it would be greatly helpful. I am using LN 8.5.

    v2FileNames = Evaluate("@AttachmentNames", doc)

    messagebox "Filename - - > " & v2FileNames(0)

    here doc is the Session documentcontext.

    Thanks in Advance.

    Sundar.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "JavaScript"

« Previous Article Next Article »
Using the void operator in anchor links   Locating File Upload Controls with JavaScript

About This Article

Author: Jake Howlett
Category: JavaScript
Hat Tip: ArjoGod, Shauna Merritt
Keywords: File; upload; type;

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »