Introduction

Hi friends, in this post we are going to learn the usage of PnP UploadFiles control. We will see how we can leverage this control on our SPFx projects and make use of the feature provided by this control. Thanks to the community.

About the Control

This control could be very useful when you would like to implement the simple file upload functionality within a limited span of time. There are some pros and cons of using this control and let us see both below.

Pros

1. Readily available control with modern file upload.
2. Drag & Drop feature for selecting multiple files.
3. Shows the selected files in an attractive UI with the icon, filename and modified date.
4. There is also an option to delete the unwanted files before uploading.

Cons

1. There are no much configurations available.
2. Drag & Drop and Add button has different functionality. Multiple files can be dragged and dropped, but add button can select only one file at a time and when different files are selected, the file is replaced.
3. Occupies a huge space.

Focus on the Code

You can refer Part 1 post on the creation of the SPFx project and installing all the dependencies. In addition to the dependencies mentioned in that post you have to install @pnp/sp – v3.5.1. You should also do some changes to the project files to make the pnpjs version 3 to work on SPFx 1.14.0. Please follow this link to do the changes.

Created a webpart named UploadFileDemo. Below is the UploadFileDemo.tsx file.

import * as React from 'react';
import { useState, FC } from 'react';
import styles from './UploadFileDemo.module.scss';
import { UploadFiles } from '@pnp/spfx-controls-react/lib/UploadFiles';
import { WebPartContext } from "@microsoft/sp-webpart-base";
import { SPFI } from "@pnp/sp";
import { IPartialTheme, ITheme } from "office-ui-fabric-react";

export interface IUploadFileDemoProps {
    isDarkTheme: boolean;
    environmentMessage: string;
    hasTeamsContext: boolean;
    userDisplayName: string;
    sp: SPFI;
    theme: IPartialTheme | ITheme;
    context: WebPartContext;
}

const UploadFileDemo: FC<IUploadFileDemoProps> = (props) => {


    return (
        <section className={`${styles.uploadFileDemo} ${props.hasTeamsContext ? styles.teams : ''}`}>
            <UploadFiles
                pageSize={5}
                context={props.context as any}
                title="Upload Files"
                onUploadFiles={(files) => {
                    console.log("files", files);
                }}
                themeVariant={props.theme}                
            />
        </section>
    );
};

export default UploadFileDemo;

Below are the updates done to the file.

1. Changed the class component to use react hooks
2. Created a state variables to display the loading and also the listitem metadata like the ‘Title‘
3. Following are some of the most commonly used properties
   • context – Current context to call the web api to load and add the attachments.
   • title – Control label
   • onUploadFiles – Method executed when Upload button is clicked.

Reference URL

UploadFiles – @pnp/spfx-controls-react

Sample Implementation

Conclussion

I hope you had learned something about one of the PnP controls. Still a lot to come in future. Stay tuned.

Please free to post your comments and let me know if you want me to post article on any particular feature or plugins that relates to SharePoint. Thanks for your support.

sudharsank/pnpcontrols-demo: Demo project on different PnP React Controls. (github.com)

Happy Coding…