The Power Platform seamlessly integrates with various services within the Microsoft 365 ecosystem, offering a comprehensive solution for businesses. Leveraging SharePoint integration, users can effortlessly access folders and files from any location. While consuming existing files poses minimal challenges, adding new files through Power Apps can be quite complex. In this guide, we will delve into the process of developing a solution that enables the simultaneous uploading of multiple files to SharePoint. By utilizing canvas apps and a custom PCF component, we will empower users with efficient file management capabilities.
What are PCF components?
Microsoft describes it as following:
Power Apps component framework empowers professional developers and app makers to create code components for model-driven and canvas apps. These code components can be used to enhance the user experience for users working with data on forms, views, dashboards, and canvas app screens.
https://learn.microsoft.com/en-us/power-apps/developer/component-framework/overview
PCF components extend the standard capabilities of the power platform. One of the laking features in Power Platform, specific within canvas apps, is the ability to upload multiple files at once.
The only standard solution is to utilize the Attachement component within a form. The downside is that it’s only available when using Dataverse tables. Standard capabilities are just to limit to archive a desend upload process.
Enter PCF’s and Power automate.
The file uploader PCF
To enhance the file uploading experience within your canvas app, I have developed a File Uploader PCF component. This component allows you to conveniently select multiple files at once. You can access the source code on Github.
To integrate this component into your environment, simply download the latest solution and import it. Both managed and unmanged solutions are available.
If your not sure how to import solutions, please read the official Microsoft documentation on importing solutions into Power Platform.
After importing the solution, you will be able to add the custom component to your canvas app.Open your canvas app and select 
.
Click on the “code” tab and select the “fileUploader” component. The component is now available under “code components” in the insert tab.
If you don’t see the “code” tab, please make sure the “PowerApps Component Framework For Canvas app” feature is turned on in your enviroment settings. (Power Platform Admin Center > Select Enviroment > Settings > Features
Add the component to the screen. It’s now time to setup the button.
Configure the fileUploader component
The component offers various parameters that can be customized through the user interface. A comprehensive description of each parameter and its functionality can be found in the component’s GitHub readme file.
Processing files
The components has an “onChange” event that is triggerd when files are selected. On selecting files the “files” property will be filled with the files data. The data is stored inside an array of object. Every object contains:
- Image Name
- Image Data as data url
[
{
name: 'filename.txt',
file: 'dataurl'
},
{
name: 'filename2.txt',
file: 'dataurl'
},
...
]
The following image shows the state of the “files” property after selecting one or multiple files.
The array can be parsed with the parseJson function. The function is still in beta on the day of writing, but can be enabled inside the app.
https://learn.microsoft.com/en-us/power-platform/power-fx/reference/function-parsejson