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

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

OneDrive Sharing Report: A Comprehensive Guide

OneDrive Sharing Report Managing and monitoring the sharing permissions of files stored in OneDrive can be a critical task for organizations. This guide provides a step-by-step walkthrough of how to create an Azure AD application with specific permissions, generate a client secret, and use a PowerShell script to retrieve and report the sharing permissions of OneDrive files. By following these steps, you will be able to audit and control file sharing across your organization, ensuring security and compliance. Step 1: Creating an Azure AD Application To get started, you'll need to create an Azure AD application that will allow you to interact with the Microsoft Graph API and retrieve information about users' OneDrive files and sharing settings. Specifically, you need to set the following permissions: Directory.Read.All Directory.ReadWrite.All Files.Read.All ...
Post a Comment
Read more

SharePoint Server continuously prompting for Credentials

Sometimes it is the case when your SharePoint server keeps on prompting for credentials. After some amount of googling and going through some reliable blogs I found following solution. Open Run Type “regedit”.                                                                  In the registry window left panel find HKEY_LOCAL_MACHINE > SYSTEM > CurrentControlSet > Control > LSA                                                                                                                      Now right clic...
3 comments
Read more