April 13, 2024

SamTech 365

PowerPlatform, Power Apps, Power Automate, PVA, SharePoint, C#, .Net, SQL, Azure News, Tips ….etc

How to Upload/Attach Files from Power Apps to SharePoint List Item or Library

I get this question very often, which is a simple ask: how can I upload a file from Power Apps to a SharePoint List Item or Document Library ?

So today, let’s cover once and for all these two scenarios:

1- The PowerApps App

For this Demo, I will create a simple Power Apps Canvas Application.

I have put in place a simple demo app, (link at the end of the post), which covers the three scenarios.

More importantly, we will need to get the attach file control.

1.1 Connect any data source which has a file field,

For this, I will connect to a SharePoint Document library “Documents“, in my dev site.

1.2 Add an Edit Form

From the Insert button, search for the Edit Form and insert it into your screen.

1.3 Make sure you add the “Attachment” field

Once prompted, connect your edit form to your SharePoint Custom List and select the Attachment field.

You should get the following:

 

1.4 Copy the Attachment control only

The edit form will display different cards (one for each field).

Locate the attachment card, and take a copy of the attachment control.

Keep it on a separate screen (as shown in the image below)

 


2- SharePoint List Item

Now, let’s look at how we can attach a file to a SharePoint List Item.

2.1 First, let’s create a Power automate

The flow will be triggered by the PowerApps upload button, which passes the title and attachment.

You can pass on additional details if you want.

First, the sharepoint list item is created and the title assigned.

Next, using the newly created item’s id, we will attach the file.

Please follow the steps in the image bellow.

2.2 Next, the PowerApp screen

For the sake of this demo, I will create a simple Custom List in SharePoint and call it “Contractors“.

Contractor SharePoint List

In the demo app, I have added two fields to capture the Title and Attachment.

 

2.3 Connect your Power Automate to Power Apps

Now, we are ready to add the power automate to the power apps.

From the left panel, add an existing Power Automate, select the Power Automate created in step 2.1 and add it to your app.

2.4 The submit button

Now, let’s trigger our power automate and pass the required parametres.

The OnSelect action fo the submit is as follow

AttachtoShpList.Run(
    txtTitle.Text,
    {
        file: {
            contentBytes: First(att_AttachToShpList.Attachments).Value,
            name: First(att_AttachToShpList.Attachments).Name
        }
    }
);

Where,

txtTitle: is the title (textbox) in the app

att_AttacheToShpList: is the attachment control.

 

Please note that we will need to add the file{} record in this exact format.

I deliberately picked the first item of the Attachments table from the att_AttachToShpList, assuming you will need just one attachment.

If you would like to upload all the files, you can use a ForAll loop and run X number calls to the power automate.

 


3- SharePoint Document Library

If you need to upload the file to a SharePoint Document library, the process is pretty much the same.

I will copy the screen to a different one and amend the Power Automate to upload the file to a library instead of a list.

3.1 The Power Automate

Our Power Automate will take the same parameters, Title and File.

The steps are slightly different.

We will need just one action, which is to create a file.

Select the library where you want your file to be stored and pass the filename and content.

You can add more steps to set other properties of the file if needed.

3.2 The submit button

Basically, the call to the new power automate is fairly similar to the previous one, just make sure you add your new PowerAutomate to the Power App, and use the following code in your Submit button > OnSelect event.

AttachtoShpLibrary.Run(
    txtTitle2.Text,
    {
        file: {
            contentBytes: First(att_AttachToShpLibrary.Attachments).Value,
            name: First(att_AttachToShpLibrary.Attachments).Name
        }
    }
);

Where,

txtTitle2: is the title (textbox) in the app

att_AttacheToShpLibrary: is the attachment control.

 

In a future post, I will explain how to upload a file to the Dataverse table in a File column.

Enjoy 😍

 

 


4- Download the Demo App

The app used in this demo is freely available in GitHub.

https://github.com/samirlogisam/PowerApps-File-Uploader