none
Add attachment button to a custom new form SharePoint 2013 RRS feed

  • Question

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

    See code below

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

    Im getting error :

    1. Uncaught TypeError: Cannot read property 'value' of undefined form.js?rev=PxBF2F2E04Ut1YUooXDAbg%3D%3D:1
      1. onclick

    Somewhere around this line:

    k=document.getElementsByName("RectGifUrl")[0];e.innerHTML='<span class="ms-delAttachments"><IMG SRC=\''+k.value+"'>&nbsp;<a href='javascript:RemoveLocal

    Thanks in Advance

    Friday, November 7, 2014 2:05 AM

Answers

  • Hi,

    According to your description, you create a custom NewForm in SharePoint Designer 2013, you want to add a button into it, when user clicks this button, a file selecting dialog will pop up for selecting a file as attachment.

    As there is already a “Attach File” feature in the ribbon, to avoid re-inventing the wheel, a workaround is that we can trigger this OOTB “Attach File” feature and take use of the built-in file selecting dialog when user clicks your custom button.

    Please take the snippet below for a try in your custom NewForm page, when clicking the hyperlink “browse”, 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>

    Feel free to reply if this is not what you really want.

    Best regards,

    Patrick


    Patrick Liang
    TechNet Community Support

    Monday, December 1, 2014 9:16 AM
    Moderator
  • Hi Patrick,

    Your code works great to add the button on my page and with tweaking now matches the rest of the fields.

    Is there a way to make this only appear on the NewForm.aspx, not EditForm.aspx or DispForm.aspx? I had to add the button through SPEasyForms to get it working, but cannot hide the button as that feature doesn't exist in SPEasyForms currently for HTMLSnippetts.

    Thanks in Advance.

    <html>
    <head>
    <h3 style="width:150px; border:1px; border-style:solid; border-color:#C5D9EB; background:#EAF4FE; border-radius: 5px 5px 5px 5px; padding: 0.5em; text-align: center; color:#3A6C9C">
    <script type="text/javascript">
    function AttachFile()
    {
    	SP.Ribbon.PageManager.get_instance().executeRootCommand("Ribbon.ListForm.Edit.Actions.AttachFile", null, null, null);
    }
    </script>
    </head>
    <body>
    <a onclick='javascript:AttachFile();'><h3><strong>Attach Application</strong></h3></a>
    </body>
    </html>

    • Marked as answer by Patrick.I Wednesday, May 29, 2019 6:35 AM
    Wednesday, December 19, 2018 6:05 PM

All replies

  • I guess if you are using this form in a list then automatically contributor level permission user account would have an option in the ribbon to attach files.

    Thank You, Pallav S. Srivastav ----- If this helped you resolve your issue, please mark it Answered.

    Friday, November 7, 2014 3:33 AM
  • Pallav this is a custom new form and im trying to add in using sharepoint designer.

    Thanks

    Friday, November 7, 2014 4:54 AM
  • 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>


    Thank You, Pallav S. Srivastav ----- If this helped you resolve your issue, please mark it Answered.

    Friday, November 7, 2014 5:03 AM
  • Hi Pallav it seems you didnt even read my post.
    This is exactly the same thing i posted.

    Please read post!!!!

    Friday, November 7, 2014 5:59 AM
  • This is the error im getting in the image


    Friday, November 7, 2014 7:03 AM
  • Can anyone help or anyone have done something similar before?

    Thanks

    Friday, November 7, 2014 10:04 PM
  • Hi,

    According to your description, you create a custom NewForm in SharePoint Designer 2013, you want to add a button into it, when user clicks this button, a file selecting dialog will pop up for selecting a file as attachment.

    As there is already a “Attach File” feature in the ribbon, to avoid re-inventing the wheel, a workaround is that we can trigger this OOTB “Attach File” feature and take use of the built-in file selecting dialog when user clicks your custom button.

    Please take the snippet below for a try in your custom NewForm page, when clicking the hyperlink “browse”, 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>

    Feel free to reply if this is not what you really want.

    Best regards,

    Patrick


    Patrick Liang
    TechNet Community Support

    Monday, December 1, 2014 9:16 AM
    Moderator
  • Hi,

    I tried the same but getting a javascript error and the dialog is not loading.

    The Error is :

    Message: Unable to get property 'clvp' of undefined or null reference

    Any help would be appreciated.

     

    Tuesday, December 16, 2014 6:42 AM
  • The script redirecting to attach file dilog box but immediately returning back to the new item form, not staying still.How can I overcome this issue?
    Monday, March 5, 2018 1:03 PM
  • I know this is an old post, just want to let other folks know how to accomplish this OOTB.

    If this is a List form,  just go to the list you have created and select (new item) to open the Form View.  Hit the Gear and Edit Page, the List Form can then be edited as a Web Part.  Toggle your Toolbar function under Miscellaneous to apply Attachments, Spell Check Directly to the List Form.
    • Proposed as answer by Xardas87 Wednesday, July 18, 2018 10:39 PM
    Wednesday, July 18, 2018 10:36 PM
  • Hi Patrick-

    It's been about 4 years, so not sure if you're still active here, but I have a follow-up question to this solution. Can you advise if still around please?

    Thanks!

    Monday, October 15, 2018 3:23 PM
  • Yes go ahead please
    Tuesday, October 16, 2018 12:52 AM
  • Hi Patrick,

    Your code works great to add the button on my page and with tweaking now matches the rest of the fields.

    Is there a way to make this only appear on the NewForm.aspx, not EditForm.aspx or DispForm.aspx? I had to add the button through SPEasyForms to get it working, but cannot hide the button as that feature doesn't exist in SPEasyForms currently for HTMLSnippetts.

    Thanks in Advance.

    <html>
    <head>
    <h3 style="width:150px; border:1px; border-style:solid; border-color:#C5D9EB; background:#EAF4FE; border-radius: 5px 5px 5px 5px; padding: 0.5em; text-align: center; color:#3A6C9C">
    <script type="text/javascript">
    function AttachFile()
    {
    	SP.Ribbon.PageManager.get_instance().executeRootCommand("Ribbon.ListForm.Edit.Actions.AttachFile", null, null, null);
    }
    </script>
    </head>
    <body>
    <a onclick='javascript:AttachFile();'><h3><strong>Attach Application</strong></h3></a>
    </body>
    </html>

    • Marked as answer by Patrick.I Wednesday, May 29, 2019 6:35 AM
    Wednesday, December 19, 2018 6:05 PM
  • Perfect answer, thank you!

    Wednesday, May 1, 2019 6:10 PM