Upload a File to SharePoint in Power Apps
Building an app with the ability to upload files is a great feature which previously required a complicated flow to accomplish until now. In this post I will show you step by step how to upload a file to SharePoint in Power Apps. Continue reading and you too will become an Office Power User!
Setting up the Flow in Power Automate
In order to upload a file to SharePoint in Power Apps we have to pass in the file to flow in Power Automate. Let’s create the flow now. Open Power Automate and create a flow from blank then choose PowerApps as the trigger.
- Site Address: https://yoursite.sharepoint.com/sites/OfficePowerUser/
- Folder Path: /Shared Documents
- File Name: Choose dynamic content and select Createfile_FileName
- File Content: Choose dynamic content and select Createfile_FileContent
Getting Our Attachment Control
Now in Power Apps we will need to do a little trick to get the needed attachment control. We will do this by connecting to a SharePoint list. Any list will do we just need it to supply an edit form temporally so that we can copy the attachment control out of the form and on to our canvas screen.
- Insert Edit Form
- Select your SharePoint list
- Select attachment field and click copy.
- Click outside of form and click paste.
- Delete the newly created edit form. We do not need it anymore.
- Attachment control – Let’s clear the errors
- BorderColor: Transparent
- FocusedBorderColor: Transparent
- Items: “”
- Tooltip: “”
- DisplayMode: DisplayMode.Edit
- Name: Attach
- AddAttachmentText: “”
- NoAttachmentsText: “”
- Color: Transparent
- File: Transparent
- HoverFill: Transparent
- HoverColor: Transparent
- X: 388
- Y: 60
- Width: 100
- Height: 100
- OnAddFile:
Set(
varAttachValueToPassSub,
JSON(
ImgForAttachment.Image,
JSONFormat.IncludeBinaryData
)
);
Set(
varAttachValueToPass,
Mid(
varAttachValueToPassSub,
Find(
“,”,
varAttachValueToPassSub
) + 1,
Len(varAttachValueToPassSub) – Find(
“,”,
varAttachValueToPassSub
) – 1
)
);
SaveFileFromPowerAppsToSharePoint.Run(
First(Attach.Attachments).Name,
varAttachValueToPass
);Reset(Attach);
UpdateContext({varStartTimer: true});
Refresh(Documents)
Setting up Icon, Image and Timer Controls
Now we will add an icon for the user to click to add the attachment and a hidden image to pass binary data to JSON and also a timer control to refresh the document library after the upload.
- Icon //Layer this behind the attachment control.
- Icon: Icon.Add
- X: 388
- Y: 60
- Width: 100
- Height: 100
- Image //Used to pass to JSON as you will see later.
- Name: imgForAttachment
- Visible: false
- Image: First(Attach.Attachments).Value
- Timer //Used to refresh the data source after a few seconds to allow the flow to complete.
- Start: varStartTimer
- Duration: 3000
- OnTimerEnd: UpdateContext({varStartTimer:false});Refresh(Documents)
Wrapping it UP!
Lastly we will add a gallery control to view our documents and launch the attachments.
- Gallery //Insert a vertical gallery control.
- Items: Documents
- Label // Insert in gallery control.
- Text ThisItem.Name
- OnSelect: Launch(ThisItem.’Link to item’)
Now you know how to upload a file to SharePoint in Power Apps! Please leave your feedback. I hope this article has been helpful for you so bookmark this blog as new articles are posted regularly.
Additional Resources
how-to-create-a-spinner-component-in-powerapps/
PowerApps upload file to SharePoint document library
