Using the PnP PropertyFieldFilePicker Control in an SPFx Web Part

The PropertyFieldFilePicker is a PnP SPFx property pane control that allows a Web Part author to browse and select a file directly from the Web Part property pane.

The control can display files from different SharePoint and Microsoft 365 locations, including recent files, OneDrive, site document libraries, local uploads and file links.

In this example, we will create a simple SPFx Web Part that stores the selected file as an IFilePickerResult object and displays its name and URL in a React component.

Official documentation

PropertyFieldFilePicker official documentation

Install the PnP property controls

Open PowerShell in the current SPFx solution folder.

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

Restore all project dependencies.

npm install

Import the control

Open the main Web Part file and add the following import:

			
import {
  PropertyFieldFilePicker,
  IFilePickerResult
} from '@pnp/spfx-property-controls/lib/PropertyFieldFilePicker';

The PropertyFieldFilePicker creates the property pane control.

The IFilePickerResult interface represents the selected file.

Create the Web Part properties

Add the selected file to the Web Part properties interface:

			
export interface IPropertyFieldFilePickerWpWebPartProps {
  description: string;
  filePickerResult?: IFilePickerResult;
}

The property is optional because no file is selected when the Web Part is first added to the page.

Create the React properties interface

Open:

			
src/webparts/propertyFieldFilePickerWp/components/IPropertyFieldFilePickerWpProps.ts

Use the following code:

			
import { IFilePickerResult } from
  '@pnp/spfx-property-controls/lib/PropertyFieldFilePicker';
export interface IPropertyFieldFilePickerWpProps {
  description: string;
  isDarkTheme: boolean;
  environmentMessage: string;
  userDisplayName: string;
  filePickerResult?: IFilePickerResult;
}

		

The Web Part will pass the complete file picker result to the React component.

Create the React component

Open:

src/webparts/propertyFieldFilePickerWp/components/PropertyFieldFilePickerWp.tsx

Use the following implementation:

			
import * as React from 'react';
import {
  IPropertyFieldFilePickerWpProps
} from './IPropertyFieldFilePickerWpProps';
const PropertyFieldFilePickerWp:
React.FunctionComponent<IPropertyFieldFilePickerWpProps> = (props) => {
  return (
    <div>
      <h2>Property Field File Picker Web Part</h2>
      <p>{props.description}</p>
      {props.filePickerResult ? (
        <div>
          <h3>Selected file</h3>
          <p>
            <strong>File name:</strong>{' '}
            {props.filePickerResult.fileName}
          </p>
          <p>
            <strong>File name without extension:</strong>{' '}
            {props.filePickerResult.fileNameWithoutExtension}
          </p>
          <p>
            <strong>File URL:</strong>{' '}
            {props.filePickerResult.fileAbsoluteUrl || 'Not available'}
          </p>
          {props.filePickerResult.fileAbsoluteUrl && (
            <p>
              <a
                href={props.filePickerResult.fileAbsoluteUrl}
                target="_blank"
                rel="noreferrer"
              >
                Open selected file
              </a>
            </p>
          )}
        </div>
      ) : (
        <p>No file selected.</p>
      )}
    </div>
  );
};
export default PropertyFieldFilePickerWp;

		

The component checks whether filePickerResult contains a value.

When a file has been selected, the component displays:

The file name.
The file name without its extension.
The absolute file URL.
A link for opening the selected file.

Pass the selected file to React

Inside the Web Part render() method, pass the property to the component:

			
public render(): void {
  const element:
  React.ReactElement<IPropertyFieldFilePickerWpProps> =
    React.createElement(
      PropertyFieldFilePickerWp,
      {
        description: this.properties.description,
        isDarkTheme: this._isDarkTheme,
        environmentMessage: this._environmentMessage,
        userDisplayName:
          this.context.pageContext.user.displayName,
        filePickerResult:
          this.properties.filePickerResult
      }
    );
  ReactDom.render(element, this.domElement);
}

		

The value stored in:

this.properties.filePickerResult

is passed to:

props.filePickerResult

in the React component.

Add the control to the Property Pane group

Inside getPropertyPaneConfiguration(), add the control to the groupFields array:

			
PropertyFieldFilePicker(
  'filePickerResult',
  {
    context: this.context as any,
    filePickerResult:
      this.properties.filePickerResult,
    onPropertyChange:
      this.onPropertyPaneFieldChanged.bind(this),
    properties:
      this.properties,
    onSave:
      (result: IFilePickerResult): void => {
        console.log(
          'Selected file:',
          result
        );
        this.properties.filePickerResult =
          result;
        this.render();
      },
    key:
      'filePickerId',
    buttonLabel:
      'Select a file',
    label:
      'File Picker'
  }
)

		

The property pane group now contains both the standard description field and the PnP file picker:

			
groupFields: [
  PropertyPaneTextField(
    'description',
    {
      label:
        strings.DescriptionFieldLabel
    }
  ),
  PropertyFieldFilePicker(
    'filePickerResult',
    {
      context: this.context as any,
      filePickerResult:
        this.properties.filePickerResult,
      onPropertyChange:
        this.onPropertyPaneFieldChanged.bind(this),
      properties:
        this.properties,
      onSave:
        (result: IFilePickerResult): void => {
          this.properties.filePickerResult =
            result;
          this.render();
        },
      key:
        'filePickerId',
      buttonLabel:
        'Select a file',
      label:
        'File Picker'
    }
  )
]

		

Understanding `onSave`

The onSave callback runs when the user confirms the file selection and closes the file picker.

			
onSave:
  (result: IFilePickerResult): void => {
    this.properties.filePickerResult =
      result;
    this.render();
  }

		

The selected result is stored in the Web Part properties.

Calling:

this.render();

updates the React component immediately after the selection.

Understanding `IFilePickerResult`

The selected file is returned as an IFilePickerResult.

The most useful properties are:

result.fileName

Returns the file name, including the extension.

result.fileNameWithoutExtension

Returns the file name without the extension.

result.fileAbsoluteUrl

Returns the absolute URL of the selected file.

The interface also provides:

result.downloadFileContent()

This method can be used to download or read the selected file content.

Optional file extension filter

The control can be limited to specific extensions by using the accepts property.

For example, to allow only images:

			
accepts: [
  '.jpg',
  '.jpeg',
  '.png',
  '.gif',
  '.svg'
]

		

Add it to the control configuration:

			
PropertyFieldFilePicker(
  'filePickerResult',
  {
    context: this.context as any,
    filePickerResult:
      this.properties.filePickerResult,
    onPropertyChange:
      this.onPropertyPaneFieldChanged.bind(this),
    properties:
      this.properties,
    onSave:
      (result: IFilePickerResult): void => {
        this.properties.filePickerResult =
          result;
        this.render();
      },
    accepts: [
      '.jpg',
      '.jpeg',
      '.png'
    ],
    key:
      'filePickerId',
    buttonLabel:
      'Select an image',
    label:
      'Image File Picker'
  }
)

		

For the basic demonstration, the accepts option can be omitted so that the picker supports all file types.

Run the Web Part

Start the SPFx development server using Heft:

heft start

Open the SharePoint workbench, add the Web Part and edit its properties.

Click Select a file, choose a file and confirm the selection.

The selected file name and URL will be displayed inside the React component.

Conclusion

The PropertyFieldFilePicker provides a complete file selection experience directly inside the SPFx property pane.

The control stores the selected file as an IFilePickerResult, which can then be passed to React, used to display file information, saved as a Web Part property or processed by other SharePoint operations.

Reference

PropertyFieldFilePicker — PnP SPFx Property Controls