Table of contents

• Control options
• Upload options
• Attaching files to items
• Single file upload using Power Automate
• Multi-file upload using Power Automate
• Changelog

Control options

In Power Apps there are different options to load pictures into the app and process them from there. Here are the controls available:

This is what the attachment and add picture control shows on iOS when clicking to add files or pictures. I would believe it is the same for Android, but I cannot confirm that 100%.

Upload options

Attaching files to items

You can use the attachment control with a form by default or parts of the form with Patch() to upload files while creating or updating an item in a SPO list. In this case I will explain using the Patch() formula.

1. Add a form control. Connect to the list that you want to store the items and attachments to. Then only make the attachment field visible and remove all others.
2. Add your other required inputs as control to your screen and add a button.

3. The OnSelect will now include a basic patch statement as well as the form data. Like this:
Copy

Patch(
    ListA,
    Defaults(ListA),
    {
        Title: TextInputCanvas2.Value
    },
    Form5.Updates
)

4. When you click the button now the item data as well as the form data (attachments) is patched to the list.

Single file upload using Power Automate

1. Add only the attachment control from a form control. Add a form, connect it to any list or library and cut out the attachment control. No the whole data card, only the control for the attachments. In my example it looks like this. Remove the rest of the form control and adjust the errors in the attachment control. Set “Max Attachments” to 1. Adjust other values as needed.

2. Navigate to Power Automate and create a new instant flow.
1. Trigger: When Power Apps calls a flow (V2)
1. Add the file input to it
2. If necessary, add more inputs
2. Add one action: Create file
1. Configure your site and library, then add file content name and file content bytes from the dynamic values
3. Add another action: Respond to a Power App or flow
1. If you want to return information to the power apps, add outputs here
3. This is what the whole flow looks like in its most basic version

4. Navigate back to Power Apps and add your flow to the app.
5. Open the OnSelect property of the save button and add the formula to run your flow. The file input in Power Automate expects a record value like this:
Copy

{
	name: "Filename with extension",
	contentBytes: "base64 of file, altough in app this a value from blob storage"
}

6. All in all, the formula would look like this. This will only upload the first (and only) file from the attachment control.
Copy

UploadsinglefiletoSPO.Run(
    {
        name: First(AttachmentControl.Attachments).Name,
        contentBytes: First(AttachmentControl.Attachments).Name
    }
)

7. If you need to link files from that library to items in another list, you can add more inputs to your flow and store the item id with the file as metadata.

Multi-file upload using Power Automate

You can technically use the single file upload version above here again, with a simple code adjustment in Power Apps. If you have multiple files in your attachment control, just use ForAll() to have a flow run for each file.

ForAll(
    AttachmentControl.Attachments As File,
    UploadsinglefiletoSPO.Run(
        {
            name: File.Name,
            contentBytes: File.Value
        }
    )
)

BUT, we would always want to optimize performance and if the flow can be triggered only once not matter the amount of files, perfect. One downside, it only works with the add picture control. I will only describe the workflow and formulas briefly in a text. Advanced users will know what to do.

1. Using the add picture control add images and files to a collection in your app
2. Create a flow with text as input. We will pass the collection as a JSON from the app to the flow by using the JSON(collection,JSONFormat.IncludeBinaryData) statement.
3. In your flow parse the text input into real JSON data using the JSON() expression.
4. As the content bytes include the URI headers (like this: data:image/png;base64,iVBORw0KGgo…) you will need to remove the headers with substring. The create file action will only need everything after “base64,”.
5. After you have removed the headers, use the create file action to create the file. For the file content use your substringed text and convert to binary using base64ToBinary() expression.
6. Configure a button in your power app to start the flow once and pass the collection into it. Add more inputs if necessary.

Changelog

❤️ Thanks for reading.