Uploading a file in Power Apps to a SharePoint library

I have to thank the Power Apps guru Shane Young for the inspiration behind this post. If you haven’t watched any of Shane’s videos on YouTube, I urge you to check him out. He is full of great tips for anyone who wants to learn or excel at Power Apps. In this post, I will be talking about how you can upload a file to a SharePoint document library from a Power App. At present, Power Apps only allows you to upload an image by default (without doing some manipulation which I will be talking about). For a detailed explanation, and those who prefer videos, I have included Shane’s YouTube explanation below. If you prefer to read along, then please keep on scrolling.

Let’s begin by adding a form into our Power App and connecting it to our SharePoint list. It can be any list in your SharePoint site, but it’s important that it is a list and not a library. We are just after the Attachments field that comes with a list by default in SharePoint.

Now create another screen, and another form. This time connect your form to the library you want to upload your document to in SharePoint.

Now we need to get the attachment control from our list, to our form that is connected to our SharePoint library. Go to the form that is connected to the SharePoint list. Open up the Data Card associated with the Attachment. Find the control that has the paperclip icon and right-click and Copy the control.

Go back to your form that is connected to your SharePoint document library and paste the attachment control. Right-click on the Data Card you want to paste the attachment inside of, and select Paste. You don’t need to paste the attachment inside of a Data Card, but if you are creating a form around the attachment, it would be a good idea to add it into a Data Card so you can format the attachment control alongside the other controls. Delete the input in the Items property in your attachment control as there will be an error after you paste it to your new form.

This is where it might get a bit weird. We need to add an image control. Bare with me here. It won’t be visible at the end (unless you want it to be), but we’ll keep it visible for now while we work on it.

Remove the SampleImage text under the Image property and replace it with code that will get the value of the last attachment from your attachment control. My attachment control is called DataCardValue6_2 (not a good name, but I hope you name it better than me).

Last(DataCardValue6_2.Attachments).Value

This will only give us details of the last document uploaded. If you need multiple documents added to your form, it would be best to add a button to your form which collects the value of each upload and adds it to a collection. For the purposes of this blog, we will assume that the attachment control will only allow one attachment.

Next we need to set some variables for when the documents get uploaded to the attachment control. Select your attachment control and go to the OnAddFile property.

To get the data of the file, we need to refer to the image which currently has the last document we uploaded. We need to convert this into JSON and get the raw format of the file. To do this, set a variable that will convert the Image property of the image we inserted earlier to JSON (I know this is confusing, but I swear it works!).

Set(varRawJSON, JSON(Image1.Image, JSONFormat.IncludeBinaryData));

If you look at what the above variable gives you (by inserting a label and taking a sneak peak), it gives you metadata about the document format, as well as the content of the file. We only want the content of file. Therefore, we have to do some string manipulation. Directly under the code you wrote above, write the following code which will extract the content of your file.

Set(varBase64File, Mid(varRawJSON, Find(",", varRawJSON) + 1, Len(varRawJSON) - Find(",", varRawJSON) - 1));

Now we have all the information we need, we are ready to send it to SharePoint. To do this, we need the help of Power Automate.

Head over to Power Automate and create a new flow with Power Apps as the trigger. Initialize the variables FileContent and FileName (I also have Title in here as it is also in my Power Apps form so I wanted to pass that to SharePoint as well). Set the value in the variables as Ask in Power Apps.

Insert a Compose action after the variables and convert your FileContent variable to binary (this is how SharePoint likes it).

base64ToBinary(variables('FileContent'))

Now we can create the file in SharePoint. The Create file action asks for the File Name and File Content (not any other properties). If you want to update other properties, such as the Title we also included, you’ll have to add the Update file properties action after the file has been created. Additionally, the File Name needs to include the file extension, hence, we included it as one of our variables.

Let’s head back to our Power App and connect it to our flow. Insert a button into your Power App.

On the OnSelect property of the button, select Action in the menu and then Power Automate. Select your flow from the list of Power Apps flows available to you. Complete the formula in the formula bar for OnSelect property. For this app, I am passing in the Title, the raw file content (the varBase64File variable we configured earlier) and the file name (we can get the file name from the last uploaded file in the attachments control).

UploadImage.Run(DataCardValue7.Text,varBase64File,Last(DataCardValue6_2.Attachments).Name);

Finally, we are done. It’s time to clean up. You can delete the first screen (the screen that has the form connected to the list as it is no longer needed). We can also reduce the image size if you don’t want it to be so prominent. I put my image file to the back and set the width and height to 1. Of course, now that you have the basics, you can make the form more aesthetically pleasing, navigate to a success screen after upload, and name the controls so they make more sense than DataCardValue6_2!