Upload/attach files to SharePoint 2013 list items using REST based approach

In this post we will see how we can add list attachments to the list items in SharePoint 2013 online using Javascript.

Some of the content in this post has been taken from the URL - http://sharepoint.stackexchange.com/questions/60417/cant-upload-a-non-text-file-to-sharepoint-app-via-rest-api and the response has been posted by Fedor Shihantsov

I found lot of articles for uploading documents to the document libraries using REST based API in javascript. But very few articles has been posted for attaching the documents to the list items

SharePoint 2013 supports the following technologies to manipulate SharePoint on the WEB


1. JSOM
2. REST

JSOM is having the size limitation of 1.5MB when uploading documents to SharePoint

Using REST we can upload attachments up 2 GB to SharePoint

In this post we will see, how we can upload the documents to SharePoint list items using REST based approach

Note: This has been tested in IE10+ and Latest google chrome and the browser has to support HTML5 where we will leverage file reader functionality

Lets start exploring for uploading/attaching files to list items

Step 1:

On the SharePoint page, add an input file control and another control of type button to submit the file 



In the above code snippet, I added an input file control and a button to upload a file. 

On click of this button, I wanted to attach the file to a list item id of 1



In the above code snippet, on click of a button, we are checking whether any file has been selected for upload or not

fileName will give the file name the user has uploaded and file variable will contain the actual file content that has been selected for uploaded

We are calling a function called upload and to this function, we are passing the list name, the list id to which we wanted to attach the file



With in upLoadFile, we are calling another javaScript function called uploadFileSP, where the actual code for uploading the file into SharePoint will take place

First we need to get the contents of the file as bytes and the below script will convert the file contents into bytes

To convert the file contents as array, we will be using HTML 5 FileReader object. See the below code for the same. 



getFileBuffer is internally called with in uploadFileSP



Once we get the contents of the file as byte array, need to convert the byte array to binary string

To upload the file, we will be using SP.RequestExecutor and use executeAsync method of SP.RequestExecutor to upload the file

To executeAsync, we need to pass the following information

url: REST based url of list item id, for which we need to attach the list item. 
method: "POST". 
binaryStringRequestBody: true - whether we are sending the contents of the body in binary format
body: The contents of the file 
success: The successcall back function when the file is uploaded successfully
error: The failure call back function if there is any error in uploading the file
state: "update" - We are updating the list item and not insert



The following web sites has been referenced for this post

http://www.shillier.com/archive/2013/03/26/uploading-files-in-sharepoint-2013-using-csom-and-rest.aspx

http://chuvash.eu/2013/02/20/rest-api-add-a-plain-text-file-as-an-attachment-to-a-list-item/

http://sharepoint.stackexchange.com/questions/60417/cant-upload-a-non-text-file-to-sharepoint-app-via-rest-api