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 @firstname.lastname@example.org 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 😀
9 thoughts on “SPFx – Using FilePicker and FileTypeIcon control”
This doesn’t work for me. The reader.readAsArrayBuffer(selectedFile) keeps giving me the error saying it’s not of type blob.
Hi, have you tried the sample from my repo?
I am also facing the same issue, getting this error- Failed to execute ‘readAsArrayBuffer’ on ‘FileReader’: parameter 1 is not of type ‘Blob’. Any solution on this?
Hi, are you using the demo code from my repo or you are trying the logic on your own code. Let me also try to run my demo code and verify if there is any issue. Thanks for reporting.
Hi, I am using the code stated above in the images & I am not able to find the demo code from the repo. Can you please send the link to it?
Hi, the link is redirected to the demos repo. The direct link to the code is https://github.com/sudharsank/spfx-demos/tree/master/src/webparts/demo2 but you have to clone the repo to run it or you can refer it directly from here.
Very good write-up. I absolutely appreciate this website. Stick with it!
I am getting this error: (possibly array v/s scalar parameter issue.
Can you help?
Error – [tsc] src/webparts/customForm/components/CustomForm.tsx(188,15):
Type ‘(filePickerResult: IFilePickerResult) => Promise’
is not assignable to type ‘(filePickerResult: IFilePickerResult) => void’.
Hi, its type mismatch the expected is single IFilePickerResult and the response is IFilePickerResult array which is a mismatch. Also, when i checked my code in the getSelectedFile method, i haven’t returned any promise.
Let me know if that helps.