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

Question

I am getting following error , while adding the file picker property to my Custom webpart.

First time I am creating custom webpart with file picker property so I get some reference from this site - PropertyFieldFilePicker - @pnp/spfx-property-controls. I did exactly same this which is in that article and getting the error.

Could anyone please help me to find out where I make some mistake? here I also share some code for reference.

anyone help will be appreciated.

Code for reference

Answer 1

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.