Get all attachments of a particular list item via REST and with minimal overhead

In this post I want to show you how I retrieve the attachments of a particular list item in my ListAttachments-script.

In order for this code to work you will need jQuery since we are are using jQuery’s Ajax-function.

Check out the code below:

<script>
function getAttachments(listName, itemId){
  var attachments = {
    count: 0,
    items: []
  };
  jQuery.ajax({
    url: L_Menu_BaseUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + itemId + "')/AttachmentFiles",
    method: "GET",
    async: false,
    headers: { "Accept": "application/json; odata=nometadata" },
    success: function (data) {
      jQuery(data.value).each(function (i) {
        attachments.items.push({
          extension: this.FileName.substring(this.FileName.lastIndexOf('.') + 1),
          name: this.FileName,
          path: this.ServerRelativeUrl
        });
        attachments.count++;
      });
    }
  });
  return allAttachments;
}

console.log(getAttachments("Custom List", 1));
</script>

What’s happening here is that we have a function called getAttachments which takes two arguments, listName and itemId.

This function will simply retrieve a JSON object by sending a GET request to
L_Menu_BaseUrl + “/_api/web/lists/getbytitle(‘” + listName + “‘)/items(‘” + itemId + “‘)/AttachmentFiles”.
L_Menu_BaseUrl is a global variable on your SharePoint-site that contains the relative path of the current site.

This script also sends odata=nometadata in the header which will reduce the amount of data that is sent back by roughly 50% by omitting a lot of meta data (which isn’t required in my case anyway).

I’m also using a synchronous API call (“async: false”) since the rest of my script depends on the returned value of that function.

Here is what is returned by the server when this code is executed on an item with 3 attachments:

{
    "value": [
        {
            "FileName": "attachment1.doc",
            "ServerRelativeUrl": "/Lists/Custom List/Attachments/1/attachment1.doc"
        },
        {
            "FileName": "attachment2.pdf",
            "ServerRelativeUrl": "/Lists/Custom List/Attachments/1/attachment2.pdf"
        },
        {
            "FileName": "attachment3.jpg",
            "ServerRelativeUrl": "/Lists/Custom List/Attachments/1/attachment1.jpg"
        }
    ]
}

In order to make the returned object a bit easier to work with, I then put all the information into my own object that has an attachment-counter and an array of objects that contain the file-extension, name and path of each attachment.

And that’s the content of the final object which is returned by the getAttachments-function:

Object {
	count: 3,
	items:[	Object { extension="doc",  name="attachment1.doc",  fullPath="/Lists/Custom List/Attachments/1/attachment1.doc"}, 
		    Object { extension="pdf",  name="attachment2.pdf",  fullPath="/Lists/Custom List/Attachments/1/attachment2.pdf"}, 
		    Object { extension="jpg",  name="attachment3.jpg",  fullPath="/Lists/Custom List/Attachments/1/attachment3.jpg"}]
}