Here’s how to upload files from Power Apps to SharePoint Online (SPO) document libraries.
Prerequisites
First, create a document library in SharePoint Online where files will be uploaded:


Then, create a SharePoint list.
Note: This is required for using the attachment control.

Note: This is required for using the attachment control.

With these steps completed, we’re ready to proceed.
Creating the Power Automate Flow
First, let’s create a Power Automate flow that will be triggered from Power Apps to handle file uploads.
Create a flow with Power Apps (V2) trigger:


Add a file type parameter:




Next, add the SharePoint “Create file” action, select the document library and site we created earlier, and set the [File name] to “triggerBody()[‘parameter_name’][‘name’]”:


For the [File Content], input the parameter itself (specifically, the contentsByte):


And with that, the Power Automate flow configuration is complete!


Creating the Power Apps Application
Now, let’s create the Power Apps application.
Create a new canvas app and add the SharePoint list we created in the prerequisites:


Add an [Edit form] to the screen:


Set the SharePoint list as the data source, which will create an attachment DataCard. Cut the DataCardValue from within it:


Paste the cut DataCardValue onto any screen and resolve the errors to complete the setup.
Note: For properties showing errors like X and Y, set any arbitrary values, and set the Items property to “blank”

Note: For properties showing errors like X and Y, set any arbitrary values, and set the Items property to “blank”

And with that, the UI is complete!
Calling Power Automate from Power Apps
Add the Power Automate flow we created earlier using [Add flow]:


Set MaxAttachments to 1 to limit the number of uploadable files to one.
Note: We’ll discuss handling multiple file uploads later.

Note: We’ll discuss handling multiple file uploads later.

Finally, add an upload button and enter the following formula in OnSelect to complete the setup:

FlowName.Run({ FlowParameterName: { contentBytes:First(AttachmentControlName.Attachments).Value, name:First(AttachmentControlName.Attachments).Name } });
Testing the Application
Run the app, attach any file, and press the button:


Power Automate will execute:


And the file will be saved to the document library:


Uploading Multiple Files
To enable multiple file uploads, change the MaxAttachments to your desired number of files:


Then modify the button’s formula as follows:

ForAll(AttachmentControlName.Attachments As attachment, FlowName.Run({ FlowParameterName: { contentBytes:attachment.Value, name:attachment.Name } }) );
When you attach multiple files and press the upload button:


Multiple files will be uploaded.
Note: Files with the same name will be overwritten.

Note: Files with the same name will be overwritten.

While it’s possible to upload files by getting dataUri using an image control, I personally prefer this method as it provides a more concise implementation.
コメント