Error - Cannot read properties of undefined (reading 'id') while adding custom file picker property to custom webpart

Hi @kem104,

You could check the steps to instsall file picker. First run this command to install the controls.

npm install @pnp/spfx-property-controls

Add this to your main webpart code.

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

Add a new property to your web part interface props.

filePickerResult: IFilePickerResult;

Then add into the getPropertyPaneConfiguration() function in your webpart under groupFields.

PropertyFieldFilePicker('filePicker', {
      context: this.context,
      filePickerResult: this.properties.filePickerResult,
      properties: this.properties,
      onSave: (e: IFilePickerResult) => {
           console.log(e);
           this.properties.filePickerResult = e;
      },
      onChanged: (e: IFilePickerResult) => {
           console.log(e);
           this.properties.filePickerResult = e;
      },
      key: "filePickerId",
      buttonLabel: "File Picker",
      label: "File Picker"
 })

Please refer to the following document

• https://pnp.github.io/sp-dev-fx-property-controls/
• https://pnp.github.io/sp-dev-fx-controls-react/

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.