How to add Attach File button in SharePoint List NewForm.aspx?

Question

Question Sign in to vote 0 Sign in to vote Hi,

Actually my requirement is, I want to remove the ribbon control entirely. While i click the SharePoint List "Add new item" link the Newform.aspx page would open with out "Attach File" option. since it is available in ribbon control only.

Now i want to add "Attach File" as a control in "Newform.aspx" page. How could i do?

Thanks & Regards Prashant

Answer 1

There are several methods to add “Attach File” control in the new form.

Method 1: Add the following code using Content Editor web part or Script Editor web part in the NewForm.aspx page. When clicking the hyperlink “browse”, OOTB “Attach File” featurewill be triggered and user will be able to select a file in the current site and insert into the current item as an attachment.

<script type="text/javascript">
function AttachFile()
{
    SP.Ribbon.PageManager.get_instance().executeRootCommand("Ribbon.ListForm.Edit.Actions.AttachFile", null, null, null);
}
</script>
<a onclick='javascript:AttachFile();'>browse</a>

method 2: Open the 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>

Refer to: Add attachment button to a custom new form SharePoint 2013

Method 3: Customize the new form using the InfoPath. Click on “Customize Form” on the ribbon under List tab to customize the list form using InfoPath. Include Attachment field in the form.

Answer 2

• 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!

---------------------------------------------------------------------------------------------------------------------------------------

Answer 3

You can just add the following to your form.

<input type="button" value="Attach File(s)" onclick="javascript:UploadAttachment()" />

Let me know if you need further instructions on how to add a script editor to your newform.aspx. It's simple and done directly in SP.