PnP File Picker Control in SPFx: A Complete Step-by-Step Guide

When developing solutions with the SharePoint Framework (SPFx), users often need to select and work with files stored in SharePoint document libraries. Whether it is attaching documents to requests, embedding media files, or linking resources, providing a seamless way to browse and choose files is essential.

The PnP File Picker control, available in the PnP SPFx React Controls library, makes this task straightforward. Instead of building custom dialogs or requiring users to paste file URLs, the File Picker offers a familiar, user-friendly experience that integrates directly with SharePoint.

What is the File Picker Control?

The File Picker control is a reusable React component designed for SPFx solutions. It allows users to browse and select files directly from SharePoint document libraries or even from their OneDrive, depending on configuration.

Key Features

Modern user interface: Familiar look, consistent with SharePoint’s file dialogs.
Support for multiple sources: Pick files from SharePoint libraries, OneDrive, or upload new files.
Single or multiple file selection: Choose one file or several.
Integration with Graph and SharePoint APIs: Ensures secure and up-to-date results.
Customizable scope: Limit selections to a specific library or file type.

Why Should You Use It?

Without this control, developers typically need to:

Build custom file selection dialogs.
Manually handle SharePoint REST or Graph API calls for file selection.
Manage upload and validation logic themselves.

The File Picker control solves these challenges by providing:

A ready-to-use, modern UI.
Faster development time.
Reduced code maintenance.
Consistent user experience across SPFx solutions.

How to Use the File Picker

Step 1. Install the Required Package

The File Picker is part of the PnP SPFx React Controls library. Run the following command:

npm install @pnp/spfx-controls-react --save

Step 2. Import the Control

Add this import statement in your component file:

import { FilePicker } from "@pnp/spfx-controls-react/lib/FilePicker";

Step 3. Implement the Control

Here is a simple example of using the File Picker:

<FilePicker
  accepts={[".docx", ".xlsx", ".pdf"]}
  buttonLabel="Select File"
  onSave={(filePickerResult) => {
    console.log("Selected file:", filePickerResult);
    this.setState({ selectedFile: filePickerResult.fileAbsoluteUrl });
  }}
  onCancel={() => console.log("File selection cancelled")}
  context={this.props.context}
/>

Explanation of Properties

accepts: Restrict file types (e.g., .docx, .pdf).
buttonLabel: The text on the button that opens the file picker.
onSave: Callback triggered when a file is selected.
onCancel: Callback triggered if the dialog is closed without selecting.
context: Passes the SPFx context, required for SharePoint and Graph integration.

Example Use Cases

Request Forms – Allow users to attach files when submitting requests (e.g., invoices, contracts).
Content Aggregators – Let content managers select files (PDFs, images) to display in a web part.
Approval Workflows – Select supporting documents to include in an approval request.

Best Practices

Restrict file types: Use the accepts property to avoid irrelevant files.
Validate permissions: Ensure users have appropriate access to the files they pick.
Use descriptive button labels: For example, “Upload Invoice” instead of the generic “Select File.”
Leverage caching for performance: If repeatedly browsing the same libraries.
Stay updated: Always use the latest version of the PnP controls for bug fixes and enhancements.

Conclusion

The PnP File Picker control is an essential tool for SPFx developers who want to give users a smooth, reliable way to select and attach files. With its built-in integration, modern UI, and flexibility, it eliminates the need for custom file dialogs and reduces development effort.

If your SPFx project involves file selection or uploads, the File Picker control is the most efficient and user-friendly option to implement.