Upload Docs to SharePoint Library & Update Columns using Pnp.js


Microsoft SharePoint Pattern and practices libraries makes it very simple to deal with SharePoint site. Less code and easy to understand. Link to SharePoint PNP-JS-Core.

In this article I will use pnp.js library to upload document and update the other fields in the same item uploaded in SharePoint document library.

(1 ) We need to reference the 4 files to work with pnp.js

/SiteAssets/4.0.5/es6-promise.js
/SiteAssets/4.0.5/es6-promise.auto.js
/SiteAssets/pnp.js
/SiteAssets/fetch.js

 

(2)I have reference the bootstrap in my page and use bootstrap classes.

Html of upload file, I have attached the link of Html Code in the PDF file, just copy and paste.

(3)  Now Call Simple JS Function UploadFiles() to Upload file and update the fields in the same item uploaded. Copy the below Code in JS File.

function UploadFiles() {
var files = document.getElementById(‘exampleInputFile’).files;
var file = files[0]; //using File Api
if (file!=undefined || file!=null){
$pnp.sp.web.getFolderByServerRelativeUrl(“/Documents”)
.files.add(file.name, file, true)
.then(function (data) {
var RelativeUrls=”/Documents/”+file.name;

//Retrive Document which is uploaded. Start
$pnp.sp.web.getFolderByServerRelativeUrl(RelativeUrls).getItem().then(item => {
//update start Below Call to Doc List will update the Row baseed on Item.ID
$pnp.sp.web.lists.getByTitle(“Documents”).items.getById(item.ID).update({
ColumnName: ‘New Value’
}).then(r => {
alert(file.name + ” upload successfully!”);
});
//update end
}); //Retrive Doc Info End
}); //Upload Document End

}

 

 

Below are the References to pnp js core library to deal with files and update item by id.  PDF file contain the html part.

Links