Get SharePoint list item attachments using REST API

Get SharePoint 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 it, one of the prerequisites is the we have ID of the list item. Once we have the ID of the list item , we can construct the URL which would be as below:

var queryUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TestList')/items(" + id +")/AttachmentFiles";


You can paste this into a browser and verify whether it works or not.

Now, in case we will use it in a normal REST query , which will get the Title and ID of the list items and iterate it through to get list of all attachments associated with list items.

Use the below code to get the Title, ID and the associated list item attachments. This will handle all case such as if SharePoint list item has multiple attachments or a single attachment or no attachments. We are using the concept of  jquery promises to fetch attachment of list items

//this function make list api call & get data in json form
function getListData(){ try { $.ajax( { url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('TestList')/items?$select=Title,ID", method: "GET", headers: { "accept": "application/json; odata=verbose", }, success: function (data) { if (data !== null) { var dataResults = data.d.results; BindListData(dataResults); } }, error: function (xhr) { console.log(xhr.status + ': ' + xhr.statusText); } ); } catch (err) { console.log(JSON.stringify(err)); } }


//this function will bind the list data in our custom html

 function BindListData(data) {

   if (data.length>0) {  
  for (var i = 0; i < data.length; i++) {                  

//url to get attachment for list item, pass the item id 
var attachmentUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TestList')/items(" + data[i].ID + ")/AttachmentFiles";

var attachment = getAttachmentUrl(attachmentUrl);

var attachUrl = [];

attachment.success(function (data) {
if (data) {
$.each(data.d.results, function () {
attachUrl.push(this.ServerRelativeUrl);
 });
}
});

if(attachUrl.length == 1)
{
//if the list item has only one attachment
var downloadHTML+= '<a href="'+attachUrl[0]+'" class="anchorClass">File Name</a>';     
$("#downloadLinks").html(downloadHTML);
}
else if(attachUrl.length > 1)
{  
//if the list item has multiple attachments
var downloadHTML= '<div class="DownlinkContainer">';
for(var i=0;i < attachUrl.length;i++)
{ 
 downloadHTML+= '<a href="'+attachUrl[i]+'" class="anchorClass">File Name</a>';            
}
downloadHTML+='</div>';
 
$("#downloadLinks").append(downloadHTML);
}
else if(attachUrl.length == 0)
{
//if the list item has no attachments
$("#downloadLinks").hide();
}
  }  
}
}

function getAttachmentUrl(attachmentUrl) {

//returns the list attachment absolute url
return $.ajax({
url: attachmentUrl,
type: "GET",
async: false,
headers: { "accept": "application/json;odata=verbose" },
success: function (data) {
if (data.d.results) {
var getUrl = onAttachmentSuccess(data);
return getUrl;
}
},
error: function (xhr) {
console.log(xhr.status + ': ' + xhr.statusText);
}
});
}

In our onAttachmentSuccess method, we will iterate through the attachments and do whatever operations we need such as binding them.  This will return all attachments and then we can bind it in our custom HTML.

function onAttachmentSuccess(data) {
var url = "";
if (data) {
$.each(data.d.results, function () {
url = this.ServerRelativeUrl;
});
}
return url;
}

In the above example, I check to ensure the data object came back.  I then loop through on data.d.results.  That object will have a property ServerRelativeUrl which has a relative URL that you can use.  This is great for providing a link to the document or to bind to something like an img tag.

function onAttachmentError(error) {
console.log(error.statusText);
}


As you can see, getting list item attachments is pretty easy using REST.  Do test it out and build amazing things !