Iconise ‘Add Picture’ control in PowerApps

Default look you get for ‘Add Picture’ control is not very appealing for end user and there is no OTB way of specifying icon for this control, except this that you can upload initial photo during design and that can stay as background until new photo is uploaded and overwritten previous one.

 

There are couple of reasons as I understood.

 

1-      ‘Add Photo’ control allows user to specify either camera shot or photo from local device, in case of Desktop experience, its file explorer to choose an image file and appears as background

2-      Sub-Image control for ‘Add Photo’ is set when new media file is uploaded so if you tried to even set default image initially, it will get overwritten as control displays image preview hence no point of setting the icon at first place.

Regardless of all above limitations, I never wanted to use this control in default shape for user. So here is a quick workaround.

You will need a temporary image to hold uploaded image or camera shot, if you don’t use temporary image then adding image to collection variable will display image as cache link instead of base64 type. In case of my app the URL was like this one.

appres://blobmanager/081553xxxead4e3482eb480b0xxx2827/1

 

Here are quick steps to iconise ‘Add picture’ control (I’m using gallery control to hold images):

The control names are default names, in real app you will want them to be aligned with your naming conventions.

1-      From Media options, add ‘Add picture’ control and ‘Image’ control

 

2-      From Gallery options, add Horizontal Gallery/or vertical whichever you like.

 

 

3-      Now select ‘UploadedImage1’ control from left hand pane and set Image property to icon that you would like to set.

 

Remove this expression from formula bar, now ‘Select an image’ should be active and can be set to uploaded image for your icon.

 

If(IsBlank(AddMediaButton1.Media), SampleImage, AddMediaButton1.Media)

 

 

 

Now select AddMediaButton1 and clear Text, Change picture text fields  

 

 

After some manual adjustments of size, the control looks like this.

 

 

4-      Now select AddMediaButton1 and set OnSelect Property

 

Collect(allimages, {Title: "Some Title", Image:Image1.Image})

 

5-      Now select Add Picture control and set Items to allimages

 

 

6-      Now select temporary image and set Image Property to AddMediaButton1.Media value

 

 

Also hide temporary image using Visible=false

 

7-      Now select Gallery control and make sure fields are set correctly.

 

 

8-      And that’s it :-)

 

Quick preview looks like this:

 

After choosing few images from local folder   

   

 

Here is in memory collection with base64 Images

 

In later article I will write about passing this collection of images to PowerApps-flow and store them into SharePoint.