Upload Files From Power Apps To SharePoint Document Library Using Power Automate Flow

In this article, I am going to explain how to upload files directly from Power Apps to SharePoint Document Library.

Before reading this article, please go through my previous articles in which I explained the steps to create a project and the phases of the project using various input fields. I also explained about expand and collapse multiple phases together by using the nested gallery,

1. Project Management Application (Create Project) Using PowerApps and SharePoint Online
2. Display Data In Power Apps Gallery And Update The Input Of That Gallery In SharePoint List
3. Multiple Expand And Collapse Rows In A Power Apps Canvas App Gallery
4. PowerApps Bulk Update Collection With Patch And Floating Concept Used For Screen Customization

As Power Apps does not have a direct attachment control, so we need to extract it by adding a form on the screen.

I have added a form you can see in the below image,

We need to click on Connect to data to connect any of the SharePoint lists. I have connected with a SharePoint List here.

Now unlock the Attachment Data Card from the right panel and Select the Attachment Data Card Value, copy and paste it outside the form and delete the form.

We will fix the errors on the Attachment Card.

• BorderColor: Any Color you prefer (i.e. Color. Black)
• Items: Remove Code
• Tooltip: Remove Code (Optional: Add Any Yourself)
• DisplayMode: Edit

Rename the attachment DataCard as “Attachmentcontrol”.

Steps to follow to attach a file

Step 1

1. Add an image on the screen

Select the Image

Image: Last(Attachmentcontrol.Attachments).Value

Here, when I click on Attach file in the Attachment control, the Image file we attach will display on the screen.

Here, we are going to upload the document not only images it can be any document like Excel, Pdf, word, etc.

For this, we need to add a Button and convert this image to JSON, and include binary data in a variable, add the variable in a label so you can see the value.

Add a button and a label on the screen. Set a variable to the label (VarAttachement control).

Click on attach the file on the attachment control and attach a file ex: Doc File and click on the button.

As displayed in the above picture it is converted, but we need to remove the extra text from the converted JSON Binary data, till Base64 and the inverted commas at the end.

OnSelect property of the button,

Set(VarAttachmentControl,JSON(Image1.Image,IncludeBinaryData));
Set(VarBase64Only, Mid(VarAttachmentControl,Find(",",VarAttachmentControl)+1, Len(VarAttachmentControl)-Find(",",VarAttachmentControl)-1));

Step 2

The next step is to create a Power Automate Flow with a trigger from Power App and attach the file in the SharePoint Document Library. For this open Power Automate Flow

Open My flows and we will create a new flow.

Select Instant cloud flow, it will trigger the following screen.

Name the flow as attach file in the Flow name box and click on Create,

Add new step and search for Create File,

Click on the Select folder.

Add the path for Shared Documents.

File Name- Create File Name

File Content- File Content - base64ToBinary(triggerBody()['Createfile_FileContent'])

To create a file, you need to enter the file name and file content in Power Apps.

For file content wrap the ask from Power App variable in base64tobinary expression i.e. base64ToBinary(triggerBody()[‘Createfile_FileContent’])

Add another button on the same screen in Power Apps and click on Action>> Power Automate >> Select the Flow to add. I will add the “Attach File” Flow in Power Apps.

Copy the same code in the previous button and add the below code to add the attachment.

On the Select property of the button, the code is as follows.

Set(varAttachmentcontrol, JSON(Image1.Image, JSONFormat.IncludeBinaryData));
Set(varBase64Only, Mid(varAttachmentcontrol, Find(",", varAttachmentcontrol) + 1, Len(varAttachmentcontrol) - Find(",", varAttachmentcontrol) - 1));
Attachfile.Run(Last(Attachmentcontrol.Attachments).Name, varBase64Only)

The code in OnSelect of the button, we can add on On Add property of the Attachment control, then the button will be no more required to add a file.

Conclusion

This is the authentic way to attach any file from Power Apps to SharePoint. In my next article, I will write how to update the ID of the SharePoint list in the Document library. I hope you enjoy working with me. 

To know, How To Build An Interactive Dashboard Using Power BI please read this article. Thanks.