Skip to main content

SPFx File Upload using Pnp

Today I came across a requirement to upload file to SharePoint Document library. This task was to be done using SPFx. Pnp helped me with this. Here is the code i used.

Below is the code for uploading file and meta data.

private UploadFile(): void {
        let input = <HTMLInputElement> document.getElementById("fileUpload");
        let files = input.files;
        for (let index = 0; index < files.length; index++) {
            const file = files[index];
            if (file.size<= 10485760)
   {
    //upload small file in document library
    
    pnp.sp.web.getFolderByServerRelativeUrl("/sites/Dummy/ProcessDocuments/").files.
add(file.name, file, true).then(f=> { 
                f.file.getItem().then(item => {
                    item.update({ProcessInformationIDId: itemID}).then(f => {
                        console.log("File uploaded successfully");
                    });
                });
            }) 
            
        } else { // upload large file in document library
            pnp.sp.web.getFolderByServerRelativeUrl("/sites/Dummy/ProcessDocuments/")
.files.addChunked(file.name, file, data => {
                console.log({data: data, message: "progress"});
            }, true).then(f => {
              console.log("File uploaded successfully");
            });
        }
    }
}

 Here is the HTML for file upload control and button.
<input type="file" name="name" id="fileUpload" multiple><button id="btnUploadFiles" 
class="btn btn-primary">Upload</button>

Below is the click event of Upload button.
$(document).on('click', '#btnUploadFiles', function (e) {
            try { /*if (formState == "view" || formState == "edit") {
              if (itemID != "" || itemID != null) {
                if (processInfrmationDetails.TRR0RunwayWFStatus == null || processInfrmationDetails.TRR0RunwayWFStatus == Status.DraftInWork) {
                  this.ApproveTRR0Runway(Status.Approved, this);
                }                      
              }
            }*/
                this.UploadFile();
            } catch (error) {
                console.log(error);
            }
        }.bind(this));

Hope this Helps!

Thanks,
Keyur
Labels:

Comments

Post a Comment

Popular posts from this blog

Business Data Connectivity

I came to a requirement wherein I was supposed to get data from an 3 rd party portal using API’s and then bring them to SharePoint server. The first approach that I finalized was just to make BDC solution that will get data from 3 rd party portal and will deploy it to SharePoint. How to Create BDC solution in SharePoint? I found below link that is having really great description about hot to create and deploy the BDC solution to SharePoint. http://www.c-sharpcorner.com/uploadfile/hung123/creating-business-data-connectivity-service-using-visual-studio-2010/ After creating an POC I came to know that BDC model cannot be deployed on Multi tenant farm. So what can be done next? After some amount of googling I came to know that we can create BDC solution using WCF services also. So I created a WCF service solution that acted as a wrapper that used to fetch data from the portal. We can them publish that service to IIS or Server and use the servic...
2 comments
Read more

SharePoint Copilot Apps: What Developers Need to Know in 2026

SharePoint Copilot Apps and SPFx Development Microsoft has been pushing SharePoint beyond being simply a collaboration and document-management platform. SharePoint Copilot Apps introduce an interesting opportunity for developers to build AI-driven experiences. The question is changing from "How do I build an SPFx solution?" to "How do I build an SPFx solution that can participate in AI-driven experiences?" SharePoint Copilot Apps entered public preview in July 2026, with scenarios including approvals, incident triage, onboarding checklists, interactive data grids, forms, charts, and dashboards. 1. What Are SharePoint Copilot Apps? Traditionally, an SPFx solution lives primarily inside SharePoint. Users navigate to a SharePoint page and interact with the application. Traditional SPFx Model User | v...
Post a Comment
Read more

SharePoint hosted apps with Angularjs

Wow.. I thought i won't be able to manage to write a blog this month. Hey guys today i am here with a something of that i have been planning since a long time. Some time back i tried to implement Angularjs with SharePoint. To be frank Angularjs is just awesome. You can have flawless feel while working with it. I don't know how will i manage to work with Angularjs in huge projects but i found it really really good to work with single page applications. Let's have a look to the classic definition of Angularjs that you find when you google for Angularjs. Angularjs "AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write." SharePoint Apps SharePoint Apps, I personally found it more developer...
6 comments
Read more