Handling File Attachments in SharePoint Hosted apps using REST API

SharePoint List items can have one or more attachments. This post describes how to save/upload attachments and how to retrieve/download them for a specific list item in a list using SharePoint client REST API using Javascript.

Uploading an Attachment to SharePoint List using REST API using Javascript

First we have to read the file content and then upload the file to the list item as an attachment. I have used HTML 5 FileReader in order to read the file content. You have to pass the control id of your file input control to the following function. The function returns a promise that we can use to get the output.

function readFile (uploadControlId) {
  
     if (!window.FileReader)
         throw "The browser does not support HTML 5";
  
     var def = new $.Deferred();
  
     var element = document.getElementById(uploadControlId);
     var file = element.files[0];
     var parts = element.value.split("\\");
     var fileName = parts[parts.length - 1];
  
     var reader = new FileReader();
     reader.onload = function (e) {
         def.resolve(e.target.result, fileName);
     }
     reader.onerror = function (e) {
         def.reject(e.target.error);
     }
  
     reader.readAsArrayBuffer(file);
  
     return def.promise();
 }

The following function upload the attachment to the specified list. It takes the ID of the list item as the first parameter, list name as the second parameter, file name and buffer go as third and fourth parameters which we get from the above function.

function uploadAttachment (id, listName, fileName, buffer) {
        var url = _spPageContextInfo.webServerRelativeUrl +
            "/_api/web/lists/getByTitle('" + listName + "')/items('" + id.toString() + "')/AttachmentFiles/add(FileName='" + fileName + "')";
  
        return $.ajax({
            url: url,
            type: "POST",
            data: buffer,
            processData: false,
            headers: {
                Accept: "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                "Content-Length": buffer.byteLength,
                "IF-MATCH": "*"
            }
        });
    },

Now we have the function to read the file content and the other function to upload the content as an attachment to a list item, so next we have to chain them together to make a proper call. We do the chaining using the .done function.

function executeUploadAttachment (id, listname) {
        readFile("uploadControlId").done(function (buffer, fileName) {
            uploadAttachment(id, listname, fileName, buffer).done(function () {
                alert("success");
            }).fail(function () {
                alert("error in uploading attachment");
            })
        }).fail(function (err) {
            alert("error in reading file content");
        });
}

Downloading the attachments of a list item

This is pretty straight forward. The following URL will give the relative URLs of the attachments of a list item.

_spPageContextInfo.webServerRelativeUrl + /_api/web/lists/getbytitle(‘” + listname + “’)/items(‘” + id.toString() + “’)/AttachmentFiles

function getAttachments (id, listname) {
        return $.ajax({
            url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbytitle('" + listname + "')/items('" + id.toString() + "')/AttachmentFiles",
            type: "GET",
            contentType: "application/json;odata=verbose",
            headers: {
                "Accept": "application/json;odata=verbose"
            }
        });
    }

Use the following code snippet get the output.

getBillingAttachments(1, "mylist").done(function (data) {
                var result = data.d.results;
  
                for (var i = 0; i < result.length; i++) {
                    alert(result[i].ServerRelativeUrl);
               }
            })

6 thoughts on “Handling File Attachments in SharePoint Hosted apps using REST API”

sarang on September 3, 2014 at 20:32 said:

what is buffer
- thuruinhttp on September 4, 2014 at 12:48 said:
  
  buffer is the parameter (which is a byte Array) which holds the file contents.
Joseph on September 25, 2014 at 14:57 said:

Do you know maybe how to update attachment ? Because at the moment I am only available to upload file. I have already found some solution but none of them worked (e.g. GetFolderByServerRelativeUrl or GetFileByServerRelativeUrl). I have alsod tried to add “add(FileName='” + fileName + “‘,overwrite=true)”;” did not work.
Best regards
Mark Altman on March 17, 2016 at 21:09 said:

Thanks for a great post. The issue I have is that my form has 4 attachment fields. I’m able to add and retrieve attachments now, but I’m not able to distinguish which list field the attachments should be associated with.
markaltman1 on March 17, 2016 at 21:11 said:

Thanks Thuru, this all works well. However, my issue is that my list has 4 attachments fields. I have been unable to associate upload or download attachments with specific fields.
- Thuru on March 22, 2016 at 22:13 said:
  
  Hi markaltman1, it’s been while that I touched SharePoint, I understand your question but do not have a quickly available environment to test and give you a solution. Please feel free to post your question here http://melick-rajee.blogspot.com/.
  
  He’s a SharePoint MVP and definitely help you.