Display SharePoint list item attachments using REST API and jQuery in SharePoint 2013/2016/Online

multiple attachment column in sharepoint list
SharePoint deveopment training course

This SharePoint Rest API tutorial explains, how to show the SharePoint list item attachments using REST API and jQuery. We will use Rest API to display list item attachments in SharePoint Online or SharePoint 2013/2016.

In the previous tutorials, I have explained:

Display SharePoint list item attachments using REST API and jQuery in SharePoint 2013/2016/Online

Now let’s use some REST API to pull these attachments and display them in list.

For retrieving attachments I am using REST API, URL for all attachments collection can be built like below

{Site URL}/_api/web/lists/getbytitle([List Title])/items([item ID])/AttachmentFiles

I have created a custom list in the host site named “Attachment“. Adding multiple items with attachments and let’s say that we want to show the item level attachments on the item selection.

Display SharePoint list item attachments using REST API
Display SharePoint list item attachments using REST API

I have an item (Item ID: 1) that has the following attachments.

Display SharePoint Online list item attachments using REST API
Display SharePoint Online list item attachments using REST API

I wanted to get the URLs of the list item attachments so that I could use it in my html. To fetch the Item ID of the list item and bind to dropdown. Once we have selected any Item ID from the list of Item IDs from Dropdown, the attachments of the respective item are shown. An on change event is used to fetch and we show the related attachments.

Use the procedure given below.

Step-1:
Navigate to your SharePoint 2013 site.

Step-2:
From this page, select Site Actions | Edit Page.

Edit the page, go to the Insert tab in the Ribbon and click Web Part option. In the Web Parts picker area, go to the Media and Content category, select the Script Editor Web Part and press the Add button.

Step-3:
Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert HTML and/or JavaScript, as shown below.

<script type="text/javascript" src="../../SiteAssets/Script/jquery-1.9.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function ($) {
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Attachments')/items?$select=Id";
getListItems(url, function (data) {
var items = data.d.results;
var SelectElement = '<select id="drpListItem" style="width:100%" name="options"><option value="">Select</option>';

// Add all the Item Id in Dropdown
for (var i = 0; i < items.length; i++) {
var itemId = items[i].Id;
SelectElement += '<option value="' + itemId + '"selected>' + itemId + '</option>';
}

SelectElement += '</select>';
$('#ItemID').append(SelectElement);
// assign the change event
$('#drpListItem').on('change', function () {
if ($(this).val() != "") {
var Requestorurl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Attachments')/items(" + $(this).val() + ")/AttachmentFiles";
getListItems(Requestorurl, function (data) {
var results = data.d.results;
var htmlStr = "";
if (data.d.results.length > 0) {
$.each(data.d.results, function () {
if (htmlStr === "") {
htmlStr = "<li><a id='attachment' href='" + this.ServerRelativeUrl + "'>" + this.FileName + "</a></li>";
}
else {
htmlStr = htmlStr + "<li><a id='attachment' href='" + this.ServerRelativeUrl + "'>" + this.FileName + "</a></li>";
}
});
}
else { htmlStr = "<strong>There are no attachments to show in this item.<strong>"; }
$('#attachmentsContainer').html(htmlStr);
});
}
});
}, function (data) {
console.log("An error occurred. Please try again.");
});

});

function getListItems(siteurl, success, failure) {
$.ajax({
url: siteurl,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
success(data);
},

error: function (data) {
failure(data);
}
});
}
</script>

Final Output:
List Item with Attachments:

display sharepoint list item attachments using rest api
display sharepoint list item attachments using rest api

List item without Attachments:

display SharePoint 2013 list item attachments using REST API
display SharePoint 2013 list item attachments using REST API

You may like following SharePoint Rest API tutorials:

Hope this SharePoint tutorial helps to display SharePoint list item attachments using REST API and jQuery in SharePoint 2013/2016/Online.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →