PnP React Controls Part 7 – FilePicker & FileTypeIcon

Introduction

Happy New Year to all my friends, followers, supporters etc.

Hi everyone, this is part 7 of PnP React Controls Series. This post will explain the usage of the PnP FilePicker and FileTypeIcon 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

FilePicker and FileTypeIcon are most important and very useful control provided by the community. It not only allow us to select the local files, but also allows us to choose files from Onedrive, SharePoint site, Stock image and also from a link. We can use the FileTypeIcon control to display the correct file type image based on the selected filepath or filename. Once file(s) are selected, there are few information provided to continue with the business based on the selected file(s).

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 web part named filePickerDemo. Below is the FilePickerDemo.tsx file.

import * as React from 'react';
import { FC, useState } from 'react';
import styles from './FilePickerDemo.module.scss';
import { IFilePickerDemoProps } from './IFilePickerDemoProps';
import { FilePicker, IFilePickerResult } from '@pnp/spfx-controls-react/lib/FilePicker';
import { FileTypeIcon, ApplicationType, IconType, ImageSize } from "@pnp/spfx-controls-react/lib/FileTypeIcon";

const filePickerDemo: FC<IFilePickerDemoProps> = (props) => {
    const {
        description,
        isDarkTheme,
        environmentMessage,
        hasTeamsContext,
        userDisplayName
    } = props;
    const [selFiles, setSelFiles] = useState<any[]>([]);
    const onFilePickerSave = async (filePickerResult: IFilePickerResult[]) => {
        if (filePickerResult && filePickerResult.length > 0) {
            let selfiles: any[] = [];
            for (var i = 0; i < filePickerResult.length; i++) {
                const item = filePickerResult[i];
                console.log("File Info: ", item);
                selfiles.push({
                    Name: item.fileName
                });
                const fileResultContent = await item.downloadFileContent();
                console.log(fileResultContent);
            }
            setSelFiles(selfiles);
        }
    };
    React.useEffect(() => {
        console.log("Selected Files: ", selFiles);
    }, [selFiles]);
    return (
        <section className={`${styles.filePickerDemo} ${hasTeamsContext ? styles.teams : ''}`}>
            <FilePicker
                bingAPIKey="<BING API KEY>"
                //accepts={[".gif", ".jpg", ".jpeg", ".bmp", ".dib", ".tif", ".tiff", ".ico", ".png", ".jxr", ".svg"]}
                buttonIcon="FileImage"
                buttonLabel='Select File(s)'
                onSave={onFilePickerSave}
                onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}
                context={props.context as any}
                hideLocalMultipleUploadTab={false}
            />
            {selFiles && selFiles.length > 0 &&
                <div><b>Selected File Info:</b>
                    <>
                        {selFiles.map(file => {
                            return (<div>Filename: <FileTypeIcon type={IconType.font} path={file.Name} size={ImageSize.medium}></FileTypeIcon> {file.Name}</div>)
                        })}
                    </>
                </div>

            }

        </section>
    );
};

export default filePickerDemo;

Below are the updates done to the file.

Changes the class component to the react hooks
Created a state variable to store the selected files information
Created a method named onFilePickerSave to store the selected files once the files are selected in the FilePicker control
Configured the FilePicker and FileTypeIcon control with the following properties
- accepts – file extension array that can be used to filter the files displayed in the control and also restricts the user to display only those extensions listed
- buttonIcon – Office UI fabric icon name displayed on the control
- buttonLabel – label to be displayed on the control
- onSave – method to extract the selected file info
- onChange – method to execute when the files are selected
- context – webpart context required by the control for various other purposes

Reference URL

FilePicker – @pnp/spfx-controls-react

FileTypeIcon – @pnp/spfx-controls-react

Sample Implementation

Conclussion

I hope you had learned something about one of the pnp control. There are lot to come in future.

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…