logo

Checking for attachments in JavaScript

Have you ever needed to validate a form and check that there is at least one attachment? I did this recently and came up with the following solution.

Place the following Formula in to the HTML Header, $$HTMLHead field or in to a Computed Text hotspot.

"<script type=\"text/javascript\">"+@NewLine+
" var numOfAttachments = " + @Text(@Attachments) + ";"+@NewLine+
"</script>"


This will produce the following HTML in a document that has one attachment.

<script type="text/javascript">
var numOfAttachments = 1;
</script>


This number variable it global as it is defined outside of any functions. This means that it can be used in ANY of your JavaScript functions on that page. Consider the following function that is called before the form can be submitted:

function validate( frm ){
//only validate your upload if there are no attachments already...
if ( numOfAttachments == 0 ) {
if ( frm.nameOfUpload.value == '' ) {
alert('You need to upload at least one file');
frm.nameOfUpload.focus();
return false;
}
return true;
}


If you don't know the name of your upload control (none R5 users!) then consider using this method to get a handle on it.

Note: This method is not perfect!! If you have an attachment on a document and the user has marked it for deletion using the check box at the bottom, the validation function will not check for a new upload and the document will then have NO attachments.

To get around this consider adding the following line to the function which checks to see if they have checked the text box. This takes account of the fact that the delete attachments check boxes will always be the last elements on the document:

if(numOfAttachments == 0 || (numOfAttachments ==1 && frm.elements[frm.elements.length-1].checked)){


Feedback

    • avatar
    • Kim
    • Wed 13 Dec 2000

    How to clear the value of the FileUpload Control

    i'd like to clear the value of the Fileupload control when use click a button. my code is like this : for(var e=0 ; e<document.forms[0].elements.length ; e++) if( document.forms[0].elements[e].type=='file'){ alert(document.forms[0].elements[e].value); document.forms[0].elements[e].value=''; }

    'alert' is ok, but setting value doesn't work. the value is read-only?? do you have any idea?

      • avatar
      • Jake
      • Thu 14 Dec 2000

      You can't..

      There is a good reason as well. Security.

      Imagine if a script could set the file upload value to the path of any file on the user's hard-drive and then upload it to the server....

      Jake

      • avatar
      • Lake
      • Thu 29 Sep 2005

      Re: How to clear the value of the FileUpload Control

      I am using this technique to wipe out the value and reset the file control back to its starting point in the DOM if I don't like the value the user is trying to upload: Call function from onChange event of file upload control.

      function alertUploadComplete( uploadObj ) { //this function first, will detect the file upload for double spaces. If there is one //alert user and remove it from the field and ask for new upload. var spacesStr = " "; var alertMsgStr = "Your file attachment contains more than 1 consecutive space.\n"; alertMsgStr += "Please rename the file without using more than 1 consecutive\n"; alertMsgStr += "space.\n\n"; alert( uploadObj.id) if ( uploadObj.value.indexOf(spacesStr) != -1) { alert(alertMsgStr);

      h = '<input id="' + uploadObj.id + '" style="font: 12px; color : #000000;" title="Select file to attach" onChange="alertUploadComplete(this)" type="file" name="' + uploadObj.name + '"></td><td width="192" valign="middle">' uploadObj.outerHTML = h; } else { alert("Click the Save button to complete saving the Attachment."); } }

      Hide the rest of this thread

        • avatar
        • Lake
        • Thu 29 Sep 2005

        Re: How to clear the value of the FileUpload Control

        or use uploadObj.outerHTML = uploadObj.outerHTML;

        1. How to clear the value of the FileUpload Control

          My screen contains list of file names already uploaded and fileUpload control.If i put some text in file control and try to delete the file from files listed form is not getting submitted.Please provide me the solution to clear the value of fileUpload control through javascript

          1. Re: How to clear the value of the FileUpload Control

            One line javascript solution here:

            http://gusiev.com/?p=11

          2. Re: How to clear the value of the FileUpload Control

            hi

        2. Re: How to clear the value of the FileUpload Contr

          pls send

          1. Re: How to clear the value of the FileUpload Contr

            here is the simple script to solve this issue..

            <FORM> <INPUT TYPE="file" NAME="elementName" id="elementName"> <INPUT TYPE="button" onclick="Clear();" value="Clear"> </FORM> <Script Language="JavaScript"> function Clear() { document.getElementById("elementName").outerHTML = "<INPUT TYPE='file' NAME='elementName' id='elementName'>"; } </Script>

          • avatar
          • Valeria
          • Fri 14 Sep 2007

          Re: How to clear the value of the FileUpload Control

          This solutions is ok, but works only in IExplorer, not in Mozilla. Any suggestions?

            • avatar
            • ChrisEmerson
            • Thu 6 Dec 2007

            Re: How to clear the value of the FileUpload Contr

            I used this:

            assuming the fileupload object is in variable 'field'

            field.value = null;

            if (field.value != null) { field.outerHTML = field.outerHTML; }

            1. Re: How to clear the value of the FileUpload Contr

              Thank you man!

              I was trying since an hour...

              Thanks a lot...

              [:)]

              1. Re: How to clear the value of the FileUpload Contr

                thanks a lot :)

          1. Re: How to clear the value of the FileUpload Control

            By replacing the control with same control

            document.getElementById('<%=fupldMaterial.ClientID%>').outerHTML = document.getElementById('<%=fupldMaterial.ClientID%>').outerHTML;

            • avatar
            • Sajeev
            • Thu 19 Feb 2009

            Re: How to clear the value of the FileUpload Control

            set its value to ""..Example document.getElementById('controlName').value=""; This works for firefox and chrome.As the second statement use the following statement..It has been given by someone in the same thread

            <FORM>

            <INPUT TYPE="file" NAME="elementName" id="elementName">

            <INPUT TYPE="button" onclick="Clear();" value="Clear">

            </FORM>

            <Script Language="JavaScript">

            function Clear()

            {

            document.getElementById("elementName").outerHTML = "<INPUT TYPE='file' NAME='elementName' id='elementName'>";

            }

    1. I am unable to attached documents at any size

      error message show that "javascript:attachment(0)"

      kindly help us

      ketan prajapati

    • avatar
    • Jai
    • Fri 25 Feb 2005

    Problem with attachments

    Hi.

    I am doing a server side validation in the webquerysave event of the form. If any of the required fields are not filled, the attached file is not saved with the document. How do I ensure that the attached file is saved even if there are some validations on the form.

    If you have any idea ...pls help

    1. Re: Problem with attachments

      Then Do Like this

      <FORM> <INPUT TYPE="file" NAME="elementName" id="elementName"> <INPUT TYPE="button" onclick="Clear();" value="Clear"> </FORM> <Script Language="JavaScript"> function Clear() { document.getElementById("elementName").outerHTML = document.getElementById("elementName").outerHTML; } </Script>

      Show the rest of this thread

Your Comments

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



Navigate other articles in the category "JavaScript"

« Previous Article Next Article »
Making pop-up windows modal   Remind users to save their forms

About This Article

Author: Jake Howlett
Category: JavaScript
Keywords: attachment; upload; limit;

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 »