How to add an “Attachments” button on a SharePoint form without using Infopath

Why traditional SharePoint form design and not InfoPath?

For a very long time Infopath has been hailed as one of the better ways to develop SharePoint forms. It’s undeniable that InfoPath is fast, in many ways flexible and easy for more technical business users to maintain.

All of that said in 2014 Microsoft dropped the following bombshell:

The InfoPath 2013 application remains the last version to be released and will work with SharePoint Server 2016.

Source: Official MSDN blog entry.

As it appears InfoPath is nearing the end of its life we’ve begun developing SharePoint forms in a more traditional manner. We’ve used SharePoint 2013’s web compatibility to its fullest by using JavaScript for most of our interactions and ASP where needed. The outcomes have been very, very surprising. We’ve found we can do far more than we ever could with InfoPath. Forms are responsive making them mobile compatible (using our own CSS), adaptive to what the user enters and they look amazing.

One thing we have found is that users are still used to having an attachments button on their forms and haven’t adapted well to having to go to the ribbon to add attachments. As a reminder, this is the field that InfoPath would add to your SharePoint forms to allow users to easily add attachments:

SharePoint and InfoPath Attach file button

How do I add an attachments button to a traditional SharePoint form?

To add the attachments button to a traditional SharePoint form first open the library in SharePoint designer. For whatever reason SharePoint locks down the default ASPX form (typically titled NewForm.aspx) and creating a new one (and making it the default) will allow you to customize your form as you desire.

Once you have created a new form add the following to the page to add an equivalent button that duplicates the functionality of InfoPath:

This will present a basic button to attach files to your form. If you wish to further customize this to also list the attached files below it, the following should be used:

The final outcome will look something like the following (depending on how you adapt it for your own forms):

SharePoint Attach File Form Button