FolderPicker control¶
This control allows you to explore and select a folder. It also allows the user to create a new folder at the current level being explored.
Here is an example of the control:
FolderPicker
no selection:
FolderPicker
selection:
FolderPicker
selected:
How to use this control in your solutions¶
- Check that you installed the
@pnp/spfx-controls-react
dependency. Check out the getting started page for more information about installing the dependency. - Import the control into your component:
import { FolderPicker, IFolder } from "@pnp/spfx-controls-react/lib/FolderPicker";
- Use the
FolderPicker
control in your code as follows:
<FolderPicker context={this.props.context}
label='Folder Picker'
required={true}
rootFolder={{
Name: 'Documents',
ServerRelativeUrl: `/sites/TestSite/Shared Documents`
}}
onSelect={this._onFolderSelect}
canCreateFolders={true} />
- The
onSelect
change event returns the selected folder and can be implemented as follows:
private _onFolderSelect = (folder: IFolder): void => {
console.log('selected folder', folder);
}
Implementation¶
The FolderPicker
control can be configured with the following properties:
Property | Type | Required | Description |
---|---|---|---|
context | BaseComponentContext | yes | The context object of the SPFx loaded webpart or customizer. |
label | string | yes | The label for the control. |
rootFolder | IFolder | yes | The lowest level folder that can be explored. This can be the root folder of a library. |
defaultFolder | IFolder | no | The default folder to be selected or explored. |
required | boolean | no | Is selection required. |
disabled | boolean | no | Is the control disabled. |
canCreateFolders | boolean | no | Allow current user to create folders on the target location. If enabled, you need to ensure that the user has the required permissions. |
onSelect | (folder: IFolder): void | no | Callback function called after a folder is selected. |