PowerApps Add Picture as attachment

PowerApps - Upload Image as List Attachment and display them in Apps.

Business scenario:

User wants to upload the pictures from their phone and attach them to the post. The post is a SharePoint list item, user can add multiple pictures per post. Once the upload is successful user want to see the uploaded pictures in PowerApps.

Solution:

I have used the Flow hack described in the Community call demo here to upload the picture (as attachment) selected by user using "Add Picture" control. Thanks to @chakkaradeep for a trick of Byte and Binary which is working perfectly fine for me.

App step by step

• Create a blank App and add 2 screens in it.

• Screen 1 will contain a gallery control which will display the items from SharePoint list

• Add Button control for new Post, OnSelect will navigate to Screen 2.

• Screen 2 will contain the fields for required information and a Add picture control.

• Add Button to Submit the Post or Image to existing Post. Please find the detailed code below:

This code checks if the "selectedItem" is blank, if yes then this is new Post else it is for adding the image to existing post. After that Patch code is invoking the Flow with parameters.

Please add following code to OnSelect of Pin icon in Gallery 1

Set(selectedItem, ThisItem.ID);
Navigate(Screen3,ScreenTransition.None);

If(
    IsBlank(selectedItem),
    ClearCollect(
        submittedRecord,
        Patch(
            'List Attachment',
            Defaults('List Attachment'),
            {Title: TextInput1.Text}
        )
    );
    Set(
        uploaded,
        AddListAttachment.Run(
            AddMediaButton1.FileName,
            UploadedImage1.Image,
            First(submittedRecord).ID
        ).text
    ),
    Set(
        uploaded,
        AddListAttachment.Run(
            AddMediaButton1.FileName,
            UploadedImage1.Image,
            selectedItem
        ).text
    );
 
);
If(
    uploaded = "Yes",
    Refresh('List Attachment');
    Set(selectedItem, Blank());
    Navigate(
        Screen1,
        ScreenTransition.None
    )
);

Flow step by step

• Create a blank flow with PowerApp as triggering action

• Add a condition which will be always False (for more details watch the video)

• In "True" path add an action "Send an email" and configure it as mentioned below:

• In "False" path add and action "Add Attachment" and configure it as mentioned below
• After it you may want to get the Response to PowerApp however its optional.

So far you will be able to upload a image as list item attachment. You can verify that from SharePoint list view. The problem displaying the attachment on an item is, the Attachment is a collection (Table type) hence you can use it on Image control added in Gallery. While playing with Gallery control I found that we can add a Gallery control with in Gallery control Voila ! 

Gallery in Gallery step by step 

• Select the Gallery 1 and Click on Edit icon

• Insert a new Gallery control and set the Items property as below

• Add remove other fields and keep only Image control in Gallery 2. Configure the Field property as below:

• Now each item from Gallery 1 will display the attachments in Gallery 2.