How to create custom attachment control in PowerApps

Attaching a file along with the form is a common requirement, By default PowerApps does not provide any attachment control. But if the SharePoint list is added as a datasource automatically the attachment control will be generated along with the controls.

But if multiple attachment control has to be shown in multiple places or Dataverse is used as a table data source, we should handle the attachments using power automate and gallery.

The attachment control generated from the list should be copied and can be used in the other places. Already the customized attachment control example is shown in this post.

Attachment Control

Items - Blank()
OnAddFile - 
//To convert the file to base64 format
Set(ExcelFile,JSON(ImageControl.Image,JSONFormat.IncludeBinaryData));
//To remove the filetype from bas64
Set(FileBase64,Mid(ExcelFile,Find(",", ExcelFile)+1,Len(ExcelFile)-Find(",",ExcelFile)-1));
//Start the workflow
FileUpload_Workflow.Run("FileName",FileBase64);
Reset(attAttachements);
Refresh(galleryDatasource);
//Reload the collection
ClearCollect(
    colAttachments,
    ForAll(
        Filter(
            galleryDatasource,
            filterColumn = "filter_Value"
        ),
        {ID: ID,
        Name:'File name with extension',
	link: 'Link to item'
        }
    )
)

Create a image control and set its value to attachment control. Basically it will convert the file into base64 format.

JSON Action - json(variables('filejsonformat'))

Parse JSON Action - 

{
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "Datastream": {
                "type": "string"
            },
            "Title": {
                "type": "string"
            }
        },
        "required": [
            "Datastream",
            "Title"
        ]
    }
}

Create File - dataUriToBinary(items('Apply_to_each')['Datastream'])

Gallery Control

Gallery control is used to show the added files along with it we should provide delete button to delete the attachments.

//Collection with added files
Items - colAttachments
//FileName with link to download the attachments
HtmlText - "<a href="&ThisItem'Link to item'&">"&ThisItem.Name&"</a>"
// Delete item
Delete Button - 
DeleteWorkflow.Run(ID,ThisItem.Name);
Refresh(galleryDatasource);
ClearCollect(
    colAttachments,
    ForAll(
        Filter(
            galleryDatasource,
            ID= ItemId 
        ),
        {ID: ID,
        Name:'File name with extension',
        link: 'Link to item'
        }
    )
)

Gallery is a multi purpose control, In this case it is used as helper control for attachments. In later posts we will explore more on gallery control

Post your queries in the comment section. Happy Building 🙂