4

I'm creating a new custom form using SharePoint Designer 2013.

I would like to add a attachment button to be able to upload files and images. How can this be done?

This is what im adding to my new custom new form:

   <tr>
<td width="190px" valign="top" class="ms-formlabel">
<h3 class="ms-standardheader">
<nobr>Attach Files</nobr>
</h3>
</td>
<td valign="top" class="ms-formbody" id="attachmentsOnClient" style="width: 434px">
<span dir="ltr">
<input type="file" name="fileupload0" id="onetidIOFile" size="56" title="Name"></input>
</span>
</td>
<td width="100px" valign="top" class="ms-formbody">
<input name="Button1" type="button" value="Attach" onclick='OkAttach()' style="width: 6em;
height: 1.7em" id="attachOKbutton" />
<span id="idSpace"></span>
</td>
</tr>

                    <tr id="idAttachmentsRow">
                        <td nowrap="true" valign="top" class="ms-formlabel" width="20%">
                            <SharePoint:FieldLabel ControlMode="New" FieldName="Attachments" runat="server"/>
                        </td>
                        <td valign="top" class="ms-formbody" width="80%">
                            <SharePoint:FormField runat="server" id="AttachmentsField" ControlMode="New" FieldName="Attachments" __designer:bind="{ddwrt:DataBind('i','AttachmentsField','Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Attachments')}"/>
                            <script>
          var elm = document.getElementById(&quot;idAttachmentsTable&quot;);
          if (elm == null || elm.rows.length == 0)
          document.getElementById(&quot;idAttachmentsRow&quot;).style.display=&apos;none&apos;;
        </script>
                        </td>
                    </tr>

See error of screen shot Im now getting

1
  • Has anyone tried with multiple attachments because with this code I am able to save only one Item in the list although you can attach multiple items in the new form but when you save the item only one item will be saved.
    – VPS
    Feb 12 '20 at 14:08
8

Create a custom list form or go to your NewForm.aspx using SharePoint Designer. Place the below code where you would like to insert the Attachment Field

<tr>
<td width="190px" valign="top" class="ms-formlabel">
<h3 class="ms-standardheader">
<nobr>Attach Files</nobr>
</h3>
</td>
<td valign="top" class="ms-formbody" id="attachmentsOnClient" style="width: 434px">
<span dir="ltr">
<input type="file" name="fileupload0"  id="onetidIOFile" size="56" title="Name">              </input>
</span>
</td>
<td width="100px" valign="top" class="ms-formbody">
<input name="Button1" type="button" value="Attach" onclick='OkAttach()'       style="width: 6em;
 height: 1.7em" />
<span id="idSpace"></span>
</td>
</tr>

Reference

12
  • 1
    Jinxed this doesn't work. Have you used this code before and did it work?.Also change okAttach to UploadAttachment but now getting error: The form was customized and attachments will not work correctly because the HTML span element doesnnot contain an id attribute span
    – naijacoder
    Nov 7 '14 at 0:07
  • The same worked for me.
    – Jinxed
    Nov 7 '14 at 5:42
  • I am not able to recreate your issue. And you don't have to change anything in the code. Use it as it is and it will work. Where have you placed this code?
    – Jinxed
    Nov 7 '14 at 6:07
  • Jinxed how did you create the custom form?
    – naijacoder
    Nov 7 '14 at 6:20
  • 1
    Thanks Jinxed got it I was creating the cutom list by creating a dataview webpart first :(
    – naijacoder
    Nov 11 '14 at 4:08
0
  • Open the form, NewForm.aspx page of respective list in advance mode in SharePoint Designer 2013
  • Find the section

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server>"

  • Insert the below section
<script src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" 
type="text/javascript"></script>
<script src="_layouts/15/sp.runtime.js" type="text/javascript"></script>
<script src="_layouts/15/sp.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function () {

var newRowContent ="<tr>"+
                    "<td width=\"190px\" valign=\"top\" class=\"ms-formlabel\">"+
                        "<h3 class=\"ms-standardheader\">"+
                            "<nobr>Attach Files</nobr>"+
                        "</h3>"+
                    "</td>"+
                    "<td valign=\"top\" class=\"ms-formbody\" id=\"attachmentsOnClient\" style=\"width: 434px\">"+
                        "<span dir=\"ltr\">"+
                            "<input type=\"file\" name=\"fileupload0\"  id=\"onetidIOFile\" size=\"39%\" title=\"Name\"></input>"+
                        "</span>"+
                    "</td>"+
                    "<td width=\"100px\" valign=\"top\" class=\"ms-formbody\">"+
                        "<input name=\"Button1\" type=\"button\" value=\"Attach\" onclick='OkAttach()' style=\"width: 6em; height: 3em\" />"+
                        "<span id=\"idSpace\"></span>"+
                    "</td>"+
                    "</tr>";
var hiddenAttachDispId=document.getElementById("idAttachmentsRow");
$(hiddenAttachDispId).before(newRowContent);
});
</script>
  • Save it and try to add new item to the custom list or refresh (Ctl+F5) the already opened NewForm.aspx page in browser!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.