How to Use Multiple Attachments Controls In Power App List Form

Introduction

In this blog, we will learn how to use multiple attachment controls and how to manage attached files with multiple attachment controls.

Technical Approach

We will store files of all attachment controls in collection and then we will store files available in collection in document library using Power Automate.

Pre-requisites

1. List should be ready for which you want to create Power App form. Here in this example list name is Projects.
2. Create document library with fields shown in the below screenshot. Here in this example document library name is Project Documents.

Create Power Automate

Step 1

Go to https://make.powerautomate.com/ and select Instant cloud flow from Create menu of left navigation.

Step 2

Now, type the flow name and select the PowerApps (V2) trigger and click on Create button.

Step 3

Now, expand the Power Apps (V2) trigger and add below input fields:

In above inputs, ItemID, UploadedByName and DocumentType will be text type field and File Content will be file type field.

 

Step 4

 

Now, click on New step and add new action for Create file in SharePoint as shown in below screenshot,

 

Step 5

Now, select the Site Address and your document library in Folder Path fields. In the File Name, copy-paste the below expression:

@{triggerBody()['file']['name']}

And, in File Content field, select File Content which we defined in Power App input as shown in below screenshot:

Step 6

Now, add new step for Update File Properties as shown in below screenshot:

Step 7

Now select the Site Address and Library Name. In Id field, select the ItemId from Create file action as shown in below screenshot:

Step 8

For the Document Type, Uploaded By and Project ID columns, select the Power App inputs as shown in below screenshot:

Step 9

Now, all attachments are uploaded to document library so we can now delete documents form list item attachment. So to delete attachment, add a new step for Get Attachments.

Step 10

Select the Site Address and List name and in Id field, select the ItemId from Power App input.

Step 11

Now, add a new step for Apply to each.

Step 12

Now in Select an output from previous steps field select the body of Get Attachments action as shown in below screenshot:

Step 13

Now, click on Add an action in Apply to each and select the Delete Attachments action.

Step 14

Now, in Delete Attachments action select the Site Address and List Name. In Id field, select the ItemId from Power App inputs and in File Identifier add the expression as shown in below screenshot:

Step 15

Now our flow is ready, so save the flow.

Use multiple attachment controls

Follow below steps to use multiple attachment controls in Power App list form:

Step 1

Open your SharePoint list and select Customize form option from integrate options.

Step 2

Once your Power App form open, one attachment fields will already available. Now select attachment datacardvalue and copy it.

Step 3

Now, paste it on the same data card, so Attachments data card will now show 2 file upload controls. You can add label above both file upload controls as shown below:

Step 4

Now we will need to add the document library in data source.

Step 5

Now select the first attachment control and add below code in its OnAddFile action.

ClearCollect(SOWDocs,Self.Attachments);

Above code will add all current selected files in SOWDocs collection.

Step 6

Now, we will use the same code for second attachment control. But with different collection name.

Step 7

Now, in both attachment controls, write the same code for OnRemoveFile action. So when user add or remove any file in attachment controls, we will have all currently selected files in collection

Step 8

Now, click on Power Automate from left menu and click on Add flow.

Step 9

Now search for your flow name and click on the flow name to add in the Power App form.

Step 10

Now, go back to the tree view of form and click on sharepointform1. And in OnSuccess method replace the below code.

ForAll(
    SOWDocs As Document,
    UploadProjectManagementDocuments.Run(
        SharePointForm1.LastSubmit.ID,
        User().FullName,
        "File to Upload",
        {
            file: {
                contentBytes: Document.Value,
                name: Document.Name
            }
        }
    )
);

ForAll(
    ProjectPlanDocs As Document,   

    UploadProjectManagementDocuments.Run(
        SharePointForm1.LastSubmit.ID,
        User().FullName,
        "Additional Attachment",
        {
            file: {
                contentBytes: Document.Value,
                name: Document.Name
            }
        }
    )
);
ResetForm(Self); RequestHide();

Step 11

Save and publish the power app form. Now selected document of both attachment controls will be stored in document library when we save the list item from Power App form.

Step 12

To show documents that are already uploaded in document library, you can use gallery control and show documents by filtering using Project ID and Document Type.

Conclusion

This is how we can use multiple attachment controls in Power App list form. Hope this blog will be helpful to you!