Revision #2

You are currently reviewing an older revision of this page.
Go to current version

This is two Part Series At First Part I will show you a method through which you can implement Multiple file attachment.
In Part 1 I will show you Design Related Part while in Part II I will show Development and Coding.

There are two things.
1. Attachment
2. Upload

Attachment should be more than one at a time at client side and then we should finally Upload all attached files.

SharePoint also provides a JavaScript File through which we can implement Multiple file attachment feature. FORM.JS file provides method through you can attach multiple file at a time. Recently I have also implemented "jquery.MultiFile.js" plugin for same purpose.

using FORM.JS File
Before using FORM.JS File we need to digg something about it. FORM.JS file is located in TEMPLATE\1033 Folder.

Below is the structure of the Attachment Form and Flow.
Clicking the “Attach File” link at the top of the form calls a JavaScript function UploadAttachment() .
It hides Part1 section and show partAttachment section. 

Select a file for attachment and click OK. But Wait... these files are actually not uploaded, they are only attached.

SharePoint uses a  variable called “FileUploadIndex” which it uses to keep track of how many attachments are present. The ID for each files becomes “fileupload” concatenated with the current “FileUploadIndex” .  fileID=FileuploadString+FileUploadIndex

When you click the OK button it calls the “OKAttach()” function that performs the following tasks:

First it creates a new row in "idAttachmentsTable" containing the file path and the link to delete the file
Creates a new file field inside idAttachmentsTable incrementing 1 to the “FileUploadIndex”. 
so if you had just uploaded first file (fileupload0), it will create fileupload1. It creates two TD one for filename and another for Delete Link

  var L_FileUploadToolTip_text="Name";
  oCellFileName.innerHTML="<span dir=\"ltr\">"+filename+"</span>&nbsp;&nbsp;&nbsp;&nbsp;";
  oCellControl.innerHTML="<IMG SRC='"+document.getElementsByName("RectGifUrl").item(0).value+   "'>&nbsp;<a href='javascript:RemoveLocal("+RowID+",\""+fileID+   "\")'>"+L_Delete_Text+"</a>";"none";

  var inputNode=document.createElement("input");
  var theForm=fileInput.form;

So by using the same method you can design the same look and feel Page like SharePoint NewForm.aspx with attachment functionality.
download the working example from below link:

using JQuery jquery.MultiFile.js Plugin
This is the easiest one :)

<asp:Content ID="contentScriptsHeader" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
     <!--Add JQuery Library-->
     <script type="text/javascript" src="../js/jquery.1.4.2.js"></script>
     <script type="text/javascript" src="../js/jquery.MultiFile.js" ></script>

<asp:Content contentplaceholderid="PlaceHolderMain" runat="server">
<span id="partAttachment">
    <table cellSpacing="0" cellPadding="0" width="100%" border="0">
                <td class="ms-formlabel" valign="top" width="190" height="50">File Name </td>
                <td class="ms-formbody" valign="bottom" width="400" height="15">
                    <span dir="ltr"></span>
                     <asp:FileUpload ID="inputFile" runat="server" class="multi" style="width: 350px"></asp:FileUpload>

It will show you the Page like below

you can delete/add more files also.
you can download this JQuery Multi File Upload Plugin from
you can also download the Jquery Main Library from

download the source page (working example) from below link:

In Part II I will show you how to upload all attached files to sharePoint List.

till then bye

Revert to this revision