PnP-JS-Core: Uploading files to SharePoint Library

This article helps us to learn on uploading files from local machine to SharePoint library or folder using PnP JavaScript 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.

Shantha Kumar
Shantha Kumar
Articles: 278

24,849 Comments

  1. I want to use the BLOB option to upload HTML created by javascript. when I used JSOM it replaced some characters.
    Do I need to do //Generate BLOB content from the text
    var blob = new Blob([“This is my HTML content”], {
    type: “text/html”
    });
    the file name will end with .HTML of course
    Thanks

  2. How do you do this in a sub web that is not in the current context?
    PnP-JS-Core: Uploading files to SharePoint Library in other web

  3. Hi Shantha Kumar,

    I’m using Upload file through FileAPI option.

    Can I upload more than 2000 files (Total size ~ 13gb) to Documents (Sharepoint Online).

    Is there some limitations? I tried but It was 4gb. Need your help. Thanks.

  4. Hai Shantha kumar ,
    I have doubt previously i used pnp /sp 2.0 version,now the version changed 3.0 i have a error in document upload in pnp /sp version 3.0 can u give idea to rectify the error to upload documents ,for small pdf document upload

    sp.web.getFolderByServerRelativePath(‘/sites/SPFxDevelopment/RMS Document Library/EducationDocs/’).files.
    addUsingpath(uploadFile.name, uploadFile, {Overwrite : true }).then(() alert(“File Uploaded”)

Comments are closed.