PnP-JS-Core: Uploading files to SharePoint Library

Basically SharePoint is a platform for storing and managing the files and contents. There are number of client side options available to upload a files to the SharePoint folder or library.

In this article,

we will use a PnP JavaScript Core Component to upload a file to a SharePoint library.

PnP JavaScript Library provides number of properties to access the SharePoint objects and methods to do Read Write operations to the SharePoint Objects. This library uses the SharePoint REST API development model to do all sort of SharePoint interactions. So this library only avail for SharePoint 2013+and SharePoint Online.To know more about this library component, visit the below links,

Simplified JavaScript Library for SharePoint

PnP-JS-Core Library

Syntax:

The following syntax requires the three parameters to upload a file.

• URL – File Name with extension
• Content – File or BLOB object
• shouldOverwrite – Boolean value to specify overwrite or not for existing file

pnp.sp.web.getFolderByServerRelativeUrl(Folder_Path)
.files.add(URL, Content, ShouldOverwrite)
.get().then(function(result) {});

Prerequisites

Before jump in to development, we have to understand and download required files to use PnP-JS-Core library.

• Download PnP.js PnP JS file
• Download fetch.js Used by PnP js file to handle web requests and responses (Required in IE)
• Download es6-promise.js Used by PnP js file to handle web requests and responses (Required in IE)
  Include the above files as a script reference in our code and then use the PnP code snippets.

  [code language=”html”]
  <script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
  <script type="text/javascript" src="/siteassets/scripts/es6-promise.js"></script>
  <script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>

  <div id="sample"></div>

  <script type="text/javascript">
  //PnP Code snippet
  </script>
  [/code]

• Apart from the js files, we require File API and BLOB object to access the file from client side. These are available in HTML5, so we need a HTML5 supported browsers.

Different options to upload files

By using the File API, we can get the file from the local machine and it reads the contents from the file. The PnP JS method requires a File DOM or BLOB object for uploading a file to the SharePoint. Based on the those, we will try two options to upload a file to the SharePoint Library or folder in a library,

• Uploading file through BLOB
• Uploading file through FileAPI

Upload file via BLOB

The following example uses the Blob API to convert the text to blob content and uploads that blob content as a text file to the SitePages library in SharePoint site.

[code language=”js”]

//Generate BLOB content from the text
var blob = new Blob(["This is my blob content"], {
type: "text/plain"
});

//Uploads a blob content as a file to the library
$pnp.sp.web.getFolderByServerRelativeUrl("/sitepages")
.files.add("testsample.txt", myBlob, true)
.then(function(data) {
alert("File uploaded successfully!");
document.getElementById("sample").innerHTML = "File uploaded successfully!"
});
[/code]

Upload file through FileAPI

The following example uses the File API to get the local file from the user’s machine and uploads the file to the SharePoint library

The below HTML code snippet contains the HTML5 File DOM, which allows the user to select the file from the machine.

[code language=”html”]
<input type="file" id="input" multiple />
[/code]

The below javascript snippet gets the file from the File element and uploads that file to the SharePoint SitePages library.

[code language=”js”]
//Get the file from File DOM
var files = document.getElementById(‘input’).files;
var file = files[0];

//Upload a file to the SharePoint Library
$pnp.sp.web.getFolderByServerRelativeUrl("/sitepages")
.files.add(file.name, file, true)
.then(function(data) {
alert(file.name + " upload successfully!");
document.getElementById("sample").innerHTML = file.name + " uploaded successfully!"
});

[/code]

Inserting the example code in Content Editor or Script Editor web-part on a web-part page with PnP prerequisites.