You can attach documents to SharePoint list items. However if you add the “Attachments” column to your list views, you get a column that only shows a paperclip icon (see below) if there are any attachments. Clicking that paperclip also won’t open any attachment or the list item to view them. It’s strictly an image.
Here’s how you can replace that paperclip on each row with the actual name(s) of your attachment(s) linked to the actual attachment(s).
Download this code, or copy and paste it into a new file in your Site Assets folder as ShowAttachments.js:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> | |
| <script type="text/javascript"> | |
| (function () { | |
| var attachmentsFiledContext = {}; | |
| attachmentsFiledContext.Templates = {}; | |
| attachmentsFiledContext.Templates.Fields = { | |
| "Attachments": { "View": AttachmentsFiledTemplate } | |
| }; | |
| SPClientTemplates.TemplateManager.RegisterTemplateOverrides(attachmentsFiledContext); | |
| })(); | |
| function AttachmentsFiledTemplate(ctx) { | |
| var itemId = ctx.CurrentItem.ID; | |
| var listName = ctx.ListTitle; | |
| return getAttachments(listName, itemId); | |
| } | |
| function getAttachments(listName,itemId) { | |
| var url = _spPageContextInfo.webAbsoluteUrl; | |
| var requestUri = url + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles"; | |
| var str = ""; | |
| $.ajax({ | |
| url: requestUri, | |
| type: "GET", | |
| headers: { "ACCEPT": "application/json;odata=verbose" }, | |
| async: false, | |
| success: function (data) { | |
| for (var i = 0; i < data.d.results.length; i++) { | |
| str += "<a href='" + data.d.results[i].ServerRelativeUrl + "'>" + data.d.results[i].FileName + "</a>"; | |
| if (i != data.d.results.length – 1) { | |
| str += "<br/>"; | |
| } | |
| } | |
| }, | |
| error: function (err) { | |
| } | |
| }); | |
| return str; | |
| } | |
| </script> |
When on the list view for which you’re wanting to show attachments, edit the page (settings wheel –> edit page).
Add a web part.
Add a content editor web part.
Paste the URL to the script you saved earlier in the Content Link box.
Expand “Appearance” and set Chrome Type to “None” and click OK.
Save the page/stop editing.
That’s all there is to it!
I was able to get this to work, but when I export the data to Excel the column just shows “Attachments” instead of the actual file name. I have over 500 records so I need to be able to export it somehow. Any thoughts?
Thank you so much for the code! It works but when I click out of the list then back into the list the links are gone and it’s just paperclip images again. What am I doing wrong? I have 2013.
is it possible to do this in the new office 365 version of SharePoint?
I am trying to get it to work on 365 but no luck so far.
Were you able to make it work on 365 ? If so could you please post here
Were you able to do it in office 365 ? Could you please post here.
Hi, Thanks for this code. Works great. Now I’d like to export the list metadata and attachement names to excel but the file name doesn’t export. Any ideas on how to make that happen?
Brad – I’m having the same issue. Were you able to find a solution?
does this work in SharePoint 2013? I can’t seem to get it to work, just still shows the paperclip
Try moving the web part with the script reference above or below the list web part where you have it now. Could make a difference. I’ve gotten this to work in 13 and 16 before.
This is great, but a better solution would be instead of simply showing the URLs in the Attachment column, can you provide a way that if we have an “AttachmentURL” column it would permanantly insert the filenames/fullURL into that column?
Correct me if I’m wrong, I think I did something like you want Nate but I am actually saving the attachment in a separate document library too. I used a regular workflow to set the link to a separate folder and then I used Flow in conjunction to extract the attachment and save it to that link instead of somewhere you can’t get to in SharePoint. In my list, the URL shows in the attachment URL column and is clickable – takes you right to the attachment.
Hi Ryan, any chance of sharing your method for doing that in Flow?
Yeah, no problem! Since I wrote this, we went strictly to Flow, so…
My Flow is to start automatically and it is a separate Flow:
When an item is created or modified
Get Attachments
Condition
I chose an Expression: length(body(‘Get_attachments’)) is greater than 0
If yes, Update item. I have a field for Attachment Link to shared documents/Title (of the item)
Apply to each
Body
Get attachment content
Create file
*Site Address
Site Name – https://company.sharepoint.com/site
*Folder Path
/Shared Documents/Title
*File Name
DisplayName
*File Content
Attachment Content
I hope this helps you. If you need more help, let me know!
Ryan
That was very helpful. Thanks!
Great code!
Is there anyway to force the attachment column to be wider?
Absolutely! See this: https://sharepointlibrarian.com/2017/04/11/adjust-sharepoint-list-column-widths/
Thanks for the quick response.
I had already tried that code and it did not work on the “Attachments” column. I also tried to reference the column by its position number in the view and that did not work either. Is there something specific that needs to be done for the “Attachments” column?
Also when I implemented that resizing code it caused the page to throw an error regarding the page not being secure.
Thanks for the help.
The script works great when the Style: is set to Default (classic view, I believe is known as)! However, changing it to style: Basic Tables then it does not show the links … how can we do it so it works on any style view?
Hey.. awesome idea! However I can’t get it to work.. Once added the attachment image disappears, I am not getting the url of the attachment.. any ideas?
Great solution, but as per Ryan…. Is there a way to get this to work in Modern UI?
Unfortunately, it’s an entirely different structure and I don’t know of a way to produce the same result in Modern UI.
No problem.
Thanks for the quick response!
Paul Dallman Applications Manager Union Maritime Limited 7 Portman Mews South, London, W1H 6AY Mobile: +44 7469157994 Email: Paul@unionmaritime.com http://www.unionmaritime.com Union Maritime Limited is a company registered in England and Wales under company number 05674101 and with its registered office at Portland House, 69-71 Wembley Hill Road, Wembley, HA9 8BU, United Kingdom. Our privacy policy can be found here.
I have gotten this to work with the “classic view”. Can you get it to work with the “New Experience” lists?