SharePoint Apps | Versatile Digital DNA

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);
               }
            })

Versatile Digital DNA

Tag Archives: SharePoint Apps

Handling File Attachments in SharePoint Hosted apps using REST API

Share this: