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

7

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

  • 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. – Harshini Hegde 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? – Harshini Hegde 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.