How To Use FilePicker Control Of PnP In SPFx Webpart

import { FilePicker, IFilePickerResult } from '@pnp/spfx-controls-react/lib/FilePicker';

Create an Interface to Store State, and add below code below the last import statement.

export interface IControlsState {
  filePickerResult: any;
}

Modify the component as below.

export default class Controls extends React.Component<IControlsProps, IControlsState> {
  constructor(props: IControlsProps, state: IControlsState) {
    super(props);
    this.state = { filePickerResult: null };
  }
  // Additional class methods and components would go here...
}

Modify the render method

Add the below code as per your requirement.

<FilePicker
  buttonLabel="Select File"
  onSave={(filePickerResult: IFilePickerResult) => {
    this.setState({ filePickerResult });
    alert(JSON.stringify(this.state.filePickerResult));
  }}
  onChanged={(filePickerResult: IFilePickerResult) => {
    this.setState({ filePickerResult });
    alert(JSON.stringify(this.state.filePickerResult));
  }}
  context={this.props.context}
/>

Below is what the final render method looks like for my sample.

If you look closely, we are using the save and unchanged methods to capture select file results, set state, and then alert the object by stringify. This is just to demonstrate what object is returned as a selected file. Please note that this will not return base64 or the actual image but only the path to the selected file.

public render(): React.ReactElement<IControlsProps> {
  return (
    <div className={styles.controls}>
      <div className={styles.container}>
        <div className={styles.row}>
          <div className={styles.column}>
            <span className={styles.title}>Welcome to SharePoint!</span>
            <p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>
            <p className={styles.description}>{escape(this.props.description)}</p>
            <a href="https://aka.ms/spfx" className={styles.button}>
              <span className={styles.label}>Learn more</span>
            </a>
          </div>
        </div>
      </div>
      <br />
      <FilePicker
        buttonLabel="Select File"
        onSave={(filePickerResult: IFilePickerResult) => {
          this.setState({ filePickerResult });
          alert(JSON.stringify(this.state.filePickerResult));
        }}
        onChanged={(filePickerResult: IFilePickerResult) => {
          this.setState({ filePickerResult });
          alert(JSON.stringify(this.state.filePickerResult));
        }}
        context={this.props.context}
      />
    </div>
  );
}

We are done with the code, now let us run it. Use the gulp serve command in the node js command prompt. please note that as this control requires the ext of the SharePoint site because it has to display lists and libraries from SharePoint. So we will test this web part in SharePoint workbench

Once, the local workbench is opened in the browser, open SharePoint workbench.

https://amazonprime.sharepoint.com/sites/familyman/_layouts/15/workbench.aspx

Below is the output of the web part.

Click on the Select file button, and we will see below panel opening below.

I have selected Site from the left tab.

Click on any document library and we will get a list of files inside that document library.

Click on OneDrive, you will see a list of all files under the currently logged-in user's drive files.

Select any of the files and click on open, below is when I have selected a file from one of the library

If you look at the alert box, we can see it has returned us selected file path, filename, and filename without extension, etc. We can use this information to work as per our requirements.

Conclusion

This control can be very useful if we want an advanced file picker control, as HTML control will only allow us to select a file from a local machine. There are many configuration options available that can be used to show/hide tabs on the left or configure different options of this control.

Thanks for reading, hope this helps.

Happy coding..!!