Uploading a file to a SharePoint library using JavaScript

December 10, 2018

Brent Ely

Howto upload a file into a SharePoint Library using SpRestLib. The upload() method accepts an ArrayBuffer from both Node.js and client browsers.

---

The sprLib.folder().upload() method accepts a filename and file data as an ArrayBuffer.

Provide file data via an HTML file picker or via fs in Node.

• There are options for security tokens and overwriting existing files
• See Folder API for a complete documentation

Using client browser to upload a file

Given an HTML file picker <input id="filePicker" type="file">:

Sample Code

// STEP 1: Use FilePicker to read file
var reader = new FileReader();
reader.readAsArrayBuffer( $('#filePicker')[0].files[0] );
reader.onloadend = function(e){
    var parts = $('#filePicker')[0].value.split("\\");
    var fileName = parts[parts.length - 1];

    // STEP 2: Upload file to SharePoint
    sprLib.folder('/sites/dev/Documents').upload({
        name: fileName,
        data: e.target.result,
        overwrite: true
    })
    .then(function(objFile){
        console.log('SUCCESS: `'+ objFile.Name +'` uploaded to: `'+ objFile.ServerRelativeUrl +'`' );
    })
    .catch(function(strErr){
        console.error(strErr);
    });
});

Working Demo

See example/sprestlib-demo-file-upload.html for a working demo.

Using Node.js to upload a file

As node runs outside of an aspx page, you'll need to provide an authorization RequestDigest to SharePoint (see node-js-demo.js for a working example of getting auth tokens from SharePoint using node).

Sample Code

sprLib.folder(gStrFilePath).upload({
    name: 'jeff_teper_secret_plan.docx',
    data: fs.readFileSync('./docs/jeff_teper_secret_plan.docx'),
    requestDigest: gStrReqDig,
    overwrite: true
})
.then((objFile) => {
    console.log('SUCCESS: `'+ objFile.Name +'` uploaded to: `'+ objFile.ServerRelativeUrl +'`' );
})
.catch((strErr) => {
    console.error(strErr);
});

Working Demo

See example/nodejs-demo.js for a working demo.