Upload Files To Document Library Using SharePoint REST API

 Prerequisites

1. Create a Document Library
2. A Site Page
3. Upload code to site assets from my Github. 

What is a Document Library?

1. Add, edit, delete a file, folder, or link from a SharePoint document library, co-author, and download documents.
2. Control who has access to a library, a folder within a library, or a private file within a library.
3. Track the activity on a file, like when it had been last modified, and receive a notification when something has changed.
4. Share files or folders with others.
5. Add a link in a document library to something that is stored outside the library, for example, a link to a file located in a different library or even a link to an external web page.
6. Highlight a link, file, or folder during a document library so you can get to them quickly.

Upload any File to Document Library using REST API in just 3 simple steps

 

STEP 1

 

Specify the type of a file in HTML, here I have specified DOCX and PDF

1. <div style="margin-top: 10%;">  
2.    <input id = "attachment" type = "file" multiple accept = ".DOCX,.docx,.txt,.TXT,.PDF,.pdf" />  
3.    <br/>  
4.    <div>  
5.        <button  id = "addFileButton" type = "button" class="btn btn-primary" onclick = "uploadDocument()">Upload</button>  
6.    </div>  
7.  </div>  

STEP 2

 

After selecting the file from the popup window, click on the upload button and uploadDocument() function gets triggered.  

 

Without selecting a file when user click's on the button warning alert displays,

1. function uploadDocument() {  
2.     var files = $("#attachment")[0].files;  
3.     if (files.length > 0) {  
4.         fileName = files[0].name;  
5.         var webUrl = _spPageContextInfo.webAbsoluteUrl;  
6.         var documentLibrary = "DemoLibrary";  
7.         var targetUrl = _spPageContextInfo.webServerRelativeUrl + "/" + documentLibrary;  
8.         // Construct the Endpoint  
9.         var url = webUrl + "/_api/Web/GetFolderByServerRelativeUrl(@target)/Files/add(overwrite=true, url='" + fileName + "')?@target='" + targetUrl + "'&$expand=ListItemAllFields";  
10.         uploadFileToFolder(files[0], url, function(data) {  
11.             var file = data.d;  
12.             DocFileName = file.Name;  
13.             var updateObject = {  
14.                 __metadata: {  
15.                     type: file.ListItemAllFields.__metadata.type  
16.                 },  
17.                 FileLeafRef: DocFileName //FileLeafRef --> Internal Name for Name Column  
18.             };
19.             alert("File uploaded successfully!");  
20.         }, function(data) {  
21.             alert("File uploading failed");  
22.         });  
23.     } else {  
24.         alert("Kindly select a file to upload.!"); 
25.     }  
26. }  

STEP 3

1. // Get the local file as an array buffer.  
2. function getFileBuffer(uploadFile) {  
3.     var deferred = jQuery.Deferred();  
4.     var reader = new FileReader();  
5.     reader.onloadend = function(e) {  
6.         deferred.resolve(e.target.result);  
7.     }  
8.     reader.onerror = function(e) {  
9.         deferred.reject(e.target.error);  
10.     }  
11.     reader.readAsArrayBuffer(uploadFile);  
12.     return deferred.promise();  
13. }  

File gets uploaded using array buffer (local file Meta Data) and POST method to upload to document folder, 

1. function uploadFileToFolder(fileObj, url, success, failure) {  
2.     var apiUrl = url;  
3.     // Initiate method calls using jQuery promises.  
4.     // Get the local file as an array buffer.  
5.     var getFile = getFileBuffer(fileObj);  
6.     // Add the file to the SharePoint folder.  
7.     getFile.done(function(arrayBuffer) {  
8.         $.ajax({  
9.             url: apiUrl,//File Collection Endpoint  
10.             type: "POST",  
11.             data: arrayBuffer,  
12.             processData: false,  
13.             async: false,  
14.             headers: {  
15.                 "accept": "application/json;odata=verbose",  
16.                 "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),  
17.             },  
18.             success: function(data) {  
19.                 success(data);  
20.             },  
21.             error: function(data) {  
22.                 success(data);  
23.             }  
24.         });  
25.     });  
26. }  

Screenshots

 

 

 Figure 1

 

Figure 2

 

Figure 3 

 

Figure 4 

 

Hurray!! We have successfully uploaded the file to the document library.

 

To know more you can refer to the official documentation,

• Upload a file by using the REST API and jQuery