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

Identity client runtime library (IDCRL) did not get a response from the login server.

Recently I was doing some testing with a background PowerShell and encountered a weird error. “Identity client runtime library (IDCRL) did not get a response from the login server”. The error that you might encounter while working with PowerShell. This error is very misleading when it comes to identifying what could go wrong. After doing quite a good amount of research below are the probable causes for the error. Invalid Credentials MFA (Multi-Factor Authentication) Manage security defaults. Solutions Invalid Credentials Check if your credentials are wrong. Especially if you are using variables. MFA (Multi-Factor Authentication) Check if MFA is enabled on the account which you are using. These only affect you badly if you are developing PowerShell for a background Job. Go to Microsoft 365 admin center Users -> Active users -> Select the user -> Manage multifactor authentication -> Select the user -> Disable multi-factor authentication. M...
2 comments
Read more

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

Site Design Tasks, Power Automate and Modern Sites

S harePoint Site templates are now replaced with Site designs in Modern Sites. We can create custom site designs using some json script(s). Site Design allows to create lists, create list views, apply theme, customize navigation, create content types, create site columns and so on. Click here to see JSON scheme reference for creating custom site design.  Endpoint to apply site design as a part of flow is as below. _api/Microsoft.Sharepoint.Utilities.WebTemplateExtensions.SiteScriptUtility.AddSiteDesignTaskToCurrentWeb We must use “Send Http Request to SharePoint” action to make an API call to SharePoint. SiteDesignId must be part if body, this is GUID of the SharePoint site design you need to apply. We can line up sequence of calls if we need to apply multiple site designs to a single site. We can now wait for few mins and all our sited designs will get applied or we can also check the status by making another API call with below endpoint. You just need to pass the Apply Desig...
Post a Comment
Read more