SPFx - Using FilePicker and FileTypeIcon control

Hi Friends, this is a series of the post explains different capabilities of the web part using SPFx.

• Using DateTime control PropertyFieldCollectionData Property Pane Control
• Using FilePicker and FileTypeIcon control --> You are here
• Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the JSON data
• Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data

In this post, I am gonna show you how you can leverage on the FilePicker and FileTypeIcon control from PnP Reusable controls on web parts. The code reference shown below will add the file as an attachment to the item in a SharePoint list called 'Demo', which has only the 'Title' field.

Regarding the basic creation of the project and other stuff, please refer to my previous blog post.

I hope those who are familiar with SPFx would know how to create the project and add the dependent npm packages. The following are some of the pre-requisites for the solution to work.

• Used SharePoint Yeoman generator version 1.10.0
• Used @pnp/spfx-property-controls for the property controls
• Used @pnp/spfx-controls-react for the content controls.
• Used @pnp/sp@2.0.3 for communication with SharePoint.

Let us walk through the code to achieve the above result.

• Once the project is created with all the dependencies, add the following imports to the webpart.ts file to use the controls.

• Create a interface for the state to store the following
• filePicked - Results of the file selected or uploaded
• message - Message to be shown to the user once the file is added as an attachment.

• Update the render method like the below

• Don't be scared of the above code (for beginners), just added the controls with the properties. Checked for the state property filePicked and message, if there is a data then displayed the FileTypeIcon with the filename and also the success message once the file is added as an attachment.
• There is a single method which is called onSave and onChanged
• onSave - This function is invoked when the file is selected from SharePoint or Web
• onChanged - This function is invoked when the file is uploaded from the local computer.
• Both the function will return the same result as IFilePickerResult. Below are the properties
• fileName - Selected filename with extension
• fileNameWithoutExtension - Selected filename without extension
• fileAbsoluteUrl - Absolute url of the file, null if it is uploaded from local
• spItemUrl - Absolute not modified SharePoint Url
• downloadFileContent - file contents
• getSelectedFile method will take the IFilePickerResult and store it in the state.

• Once there is a value in the state object, the Save Attachment button is displayed and a method called addAttachmentToList is bind to its click event.
• This method will use the result from the state object, retrieve the file contents using FileReader and then save it to the list item as an attachment.
• Add the PnP reference in order for the method to work as shown below.

• Once the above method is bind to the button, when the file is selected or uploaded, the button is visible and when the button is clicked, a new item is created and the attachment is added to the item. Upon selection of the file, the file is displayed with the relevant fileicon and filename below the filepicker control.

That's it friends, please follow the steps mentioned above to use date control in the collection property pane control. Click here to refer the actual source code.

Happy coding. Cheers 😀