In this tutorial, we learn how to use PowerApps to upload a file directly to a
SharePoint document library. No complicated code, but instead a simple and straightforward way to save all files into SharePoint.
So how did we get here? After trying to figure it out for about a year and a half, we have come up with a pretty straightforward solution. Sure, other people have figured out ways to do this, but we’ve never quite taken to any of these methods––which have been very complicated using complex Power Automate actions and parsing through code. So, today we’re going to show you what we have finally solved, thanks to someone else on Twitter named Romero. (Click here for the link to Romero’s solution).
Romero’s method was great and involved uploading lots of files. In particular, he shared one little step that we had never thought of. That one step was the catalyst for this super simplified solution. Thank you to Romero for sharing! This is what our community is all about. People post content, and then others can build on it. Hopefully, you can do the same with this tutorial and do even better things after reading or watching it.
Steps to Upload a File
To illustrate how we engineered this solution, we’ll show you how to build it from scratch. This way, you can see the mechanics behind it, what the UI looks like, and how to handle the file links.
First up, start with a brand new canvas app and grab the Attachment Control from a form. If you need to find out how to do this, we created a video tutorial on that too. To watch that tutorial, click here.
The main reason why we do this is that when you hit ‘Play’ and then click on ‘Attach a File’ you are able to select from ‘All Files.’ Instead of using the default control we have used for years, where you would click on ‘Insert’, ‘Media’, and the ‘Add Picture’ for example. However, the downside of that control is that it defaults to all image files, and then you need to change it.
Now, instead, we are going to select the ‘Media’ Control and then select, ‘Image.’
(This ‘Image Control’ was in fact, the missing step that we needed to complete the solution!) Next, we’ll select ‘Attach File’ and select a small image file to start off. Select ‘Open,’ and you’ll see it’s been added. Now we can select the image control and for the Image property in the formula bar we will put the following code: Last(AttachmentControl.Attachments).Value. Here, our attachment control is named AttachmentControl. Make sure you are referencing the correct control.
The attachment control stores files in a local blob storage, but by passing it through the image control, we can extract the file content, allowing us to save the files directly to SharePoint. You can see this demonstrated by inserting a button and setting the OnSelect property to Set(varDemoFromAttachmentControl, JSON(Image1.Image, IncludeBinaryData)) and then insert a label and set the text property to varDemoFromAttachmentControl.
Now we can attach another file, such as an Excel file. Once you hit ‘Open’, you’ll see that it recognizes everything within the file content including the type of file and the base64 code. We only need the encoded portion. (Basically everything after the base64 and following comma). So, let's fix it up a bit. For now we will change the formula in separate steps. In the button setting your variables, add:
Set(varBase64Only, Mid (varDemoFromAttachmentControl Find (“,”, varDemoFromAttachmentControl)+1 )). Remember to separate commands with a semicolon. Press the button while holding the Alt key and create another label and in the formula tab write varBase64Only for the Text property. Turn on scrolling for the label. We have now stripped out everything before the actual file.
We still haven’t completely isolated the file content. JSON adds quotation marks at the end. To fix this, go back to your button’s OnSelect property and change the formula to set varBase64Only to the following: Set (varBase64Only, Mid (varDemoFromAttachmentControl, Find (“,”, VarDemoFromAttachmentControl)+1, Len (varDemoFromAttachmentControl)-Find (“,”, varDemoFromAttachmentControl)-2)). Then if you look at each label you’ll see they end with AAAAA at the end. If we add a PDF, you’ll see that the label text starts and ends with the same text. It’s important to write this formula in a way that it can handle different file types.
Getting the Data into SharePoint
Now that we know how to get the file content out, we need to get it into SharePoint. To do this, we are going to write the world’s simplest flow:
Step 1: Visit Power Automate, click on ‘Create,’ ‘then select ‘Instant cloud flow’ and name it. We’re calling ours ‘Easy Upload.’ Select PowerApps and click ‘Create.’
Step 2: Now, we will add a new step and search for SharePoint, and in the Sharepoint Connector, you’ll see ‘Create File.’ Now you’ll need to enter the Site Address. We want to create it in my PowerApps Video Sites, but choose whichever site you would like for your solution. For Folder Path select Shared Documents, Files from PowerApps (we created this), File Name: open the dynamic content and select Ask Powerapps for the name, and for File Content Ask Powerapps too. If you don’t see the Ask in PowerApps, search for it in the dynamic content.
Take note: SharePoint does not store base64 files but rather in binary for some reason. So let’s delete the File Content for now. For the File Content, open up the dynamic content dialogue box and type base64ToBinary(), then place your cursor between the parentheses, switch to the Dynamic Content tab, and select the Createfile_FileContent.This is going to take that long string and encode it once again. All you have to do is give it the string that you want to give it and the file contents that we’re sending over. That’s it.
Step 3: Hit “Next Step” underneath ‘Choose an Action’ search for PowerApps and select: Respond to a PowerApps or Flow, Add an Output, Add a Text Output, and call it SharePoint File Link. Where it says: Enter a Value to Respond paste your Sharepoint URL and get rid of that last ‘\,’. You’ll see under the ‘Dynamic Content’ tab, you can select ‘Path.’ This will automatically grab the path of the file we created. Hit ‘Save’.
Now we go back over to PowerApps and Insert another Button. Once we select this Button we are going to select ‘Action’ and then ‘Flows.’ You’ll find the Easy Upload to select, which will put the code EasyUpload.Run() in the OnSelect property of your button. A small note, if you have any code in the OnSelect property in your button, adding a flow will erase it, so copy that code elsewhere first. Replace the formula with: EasyUpload.Run(Last(AttachmentControl.Attachments).Name, varBase64Only). Now add: Set(varFileLink, at the beginning and .sharepointfilelink) at the end. Click on the Button (by holding Alt or putting your app in Preview Mode), and if we refresh files uploaded from Powerapps, you’ll see your uploaded PDF.
To test your URL, insert another Button and in the formula bar for the OnSelect property type: Launch(varFileLink), hit Preview or hold down Alt and click on your new Button; it launches it straight into the file.
Simplifying the Attachment Control
Now we can simplify our actual Attachment Control to make it look cleaner. Once you’ve selected it, in the properties drop-down, you’ll see something called ‘OnAddFile.’ Now, we will grab both Button’s OnSelect code and copy it because it does everything we want. Ensure that you separate the code with a semicolon and add the initial button’s code first with the flow running second. Then we will paste this into our ‘OnAddFile’. We will go to the end of the formula and reset the attachment control by adding: Reset (AttachmentControl). The final result will look like this:
Set(varDemoFromAttachmentControl, JSON(Image1.Image, JSONFormat.IncludeBinaryData));
Set(varBase64Only, Mid(varDemoFromAttachmentControl, Find(",", varDemoFromAttachmentControl)+1, Len(varDemoFromAttachmentControl) - Find(",", varDemoFromAttachmentControl)-1));
Set(varFileLink, EasyUpload.Run(Last(AttachmentControl.Attachments).Name, varBase64Only).sharepointfilelink);
Reset(AttachmentControl)Now we can delete both buttons and the label so that we are only left with our attachment control. If we attach a file and upload a Word Doc, it will reset and you will see the file within a few seconds.
Now we can clean our attachment control up even more. So, you can make your fill transparent, change the color to transparent, and set the border color to transparent. Then, set a hover border color to black so that when you hover over it with the mouse, you can see it. Then we inserted the ‘+’ icon over the top of it and resized it. Then we right-click on the ‘+’ icon and ‘send it to the back.’ This means that it is behind the Attachment Control. But as the Attachment Control is transparent so we can’t see it.
Take Note: Remember the image control needs to stay there, so don’t delete it. You can set the visible property to “False,” make it really small, and send it to the corner.
So, there you go! Take this tutorial as guidance and come up with different ways and have fun with it. We encourage you to do more with it and expand on the concept. To watch the full video tutorial on how to use PowerApps to upload a file, click here.
Build Your Own App with PowerApps
Power Apps provides a rapid application development environment to build a wide range of custom apps. Whether you need assistance with an issue or complete project services, contact PowerApps today.