Power Apps Add Picture Control And Save To SharePoint Library

A commonly requested feature of many Power Apps is to allow the user to add a photo. Mobile users want to take a picture using their device’s camera and desktop users want to select an image from a folder to upload it. The Power Apps add picture control can do both. It also provides a better user experience than the Power Apps camera control so I always use it instead.

In this article I will show you how to use the Power Apps add picture control and save the image to a SharePoint Library.

Table Of Contents:
Introduction: The Photo Gallery App
SharePoint Document Library Setup
Capturing A Photo With The Add Picture Control
Reviewing And Captioning A Photo
Uploading A Photo To SharePoint With Power Automate
Deleting A Photo
Focusing On A Photo In The Gallery

Introduction: The Photo Gallery App

The Photo Gallery App is used to store images of cats at a Pet Rescue Shelter. Volunteers at the shelter take a picture of each cat with a mobile device, fill-in the cat’s name and upload the image file to SharePoint.

SharePoint Document Library Setup

Start by making a new SharePoint Document Library called Blog Images. Add a text column to the library called Caption. Then place several cat photos with captions inside the library as shown below.

Creating The Thumbnail Photo Gallery

Open Power Apps and create a new app from blank. Rename the first screen ‘Thumbnail Gallery Screen’. Then place a label at the top of the screen with the words Photo Gallery to create a header.

Next, insert a new blank vertical gallery into the app…

…with the Items property pointing to the SharePoint Document Library.

'Blog Images'

The photos will be displayed in a grid just like a photo album.

The WrapCount property of a gallery defines how many items are displayed horizontally. Change the code in this property to match below and also edit the TemplateFill property to show a solid grey background.

TemplateFill: RGBA(237, 237, 237, 1)
WrapCount: 4

Now we are ready to display our cat images in the gallery as shown below.

Place an image control inside the gallery with the following properties. The image will automatically scale itself to fit the tile. Notice how the grey background gives the app a sense symmetry even though the pictures are different shapes.

Height: Parent.TemplateHeight
Image: ThisItem.Thumbnail.Large
Width: Parent.TemplateWidth

Capturing A Photo With The Add Picture Control

Volunteers at the shelter take a picture of each new cat with their mobile device. To do this we will need to access the device’s camera. The Add Picture control is the best way to do this because you can use the device’s native photo app to take high-quality pictures.

Insert a Photo icon and place it in the top right corner of the app.

Then insert an add picture control to the app and position it directly on top of the camera. Make the add picture control invisible by changing the following properties to transparent.

Color: Transparent
HoverColor: Transparent
PressedColor: Transparent
Fill: Transparent
HoverFill: Transparent
PressedFill: Transparent

Ungroup the add picture control and the Image Control underneath it. Move the image control to the bottom of the tree view. We don’t want to see any image when we click the invisible add picture control.

Add this code to the OnChange property of the add picture control to store the photo taken in a variable called varCurrentImage and go to the next screen which we will create in the following section.

Set(varCurrentImage, img_Thumbnail_AddMediaButton.Image);
Set(varCurrentRecord, Blank());
Navigate('Single Image Screen', Fade)

Reviewing And Captioning A Photo

Once a photo is taken the volunteer reviews it and adds the cat’s name. Create a new screen called Single Image Screen with a light grey background and a dark grey footer (by using a label and changing the fill property).

Insert an image control onto the screen called img_SingleImage_Image.

Make it display photo by updating the Image property to varCurrentImage and give it some styling by padding it.

Image: varCurrentImage
PaddingBottom: 20
PaddingLeft: 20
PaddingRight: 20
PaddingTop: 20

Place a text input called txt_SingleImage_Caption below the photo.

We want to tell the volunteer to write the cat’s name in the text box. Use this code in the HintText property of the text input. At the same time, update the DisplayMode property so the caption can only be edited for new photos and the Default property to show the caption for a successfully submitted photo.

Default: varCurrentRecord.Caption
DisplayMode:  If(IsBlank(varCurrentRecord), DisplayMode.Edit, DisplayMode.View)
HintText:  If(IsBlank(varCurrentRecord), "Write A Caption", "[No Caption]")

Complete the menu by adding two icons to the footer: a Check and a Trash icon. Pressing the check icon will upload the photo to SharePoint while the trash icon will remove it. We will code this behavior soon but first we do some work in Power Automate.

Uploading A Photo To SharePoint With Power Automate

There is not any way to directly upload an image from Power Apps to a SharePoint Document Library so we must build a flow to do it instead. Open Power Automate and create a new flow from instant. Select the Power Apps (V2) trigger and click Create.

Setup the flow trigger with two inputs: Picture (file type) and Caption (text type). Make both fields required.

Then add these flow actions to create an image file is created in the SharePoint document library and apply a caption to the file properties.

Save the flow and return to Power Apps. Click the action tab on the top menu. Then select the flow we made from the list.

Place this code in the OnSelect property of the Check icon. It converts the image to binary so it can read by the flow and returns the volunteer to the gallery once done.

// run flow
'BlogImages:UploadPhotoToSharePoint'.Run(
     {
         contentBytes: img_SingleImage_Image.Image,
         name: Text(Now(), "yyMMddhhmmss")
     },
     txt_SingleImage_Caption.Text
 )

// next screen
Navigate('Thumbnail Gallery Screen', Fade);

Deleting A Photo

We’re almost done. There are only a few more steps needed to finish the app.

When the volunteer clicks on the Trash icon they should be taken back to the Thumbnail Gallery Screen.

Use this code in the OnSelect property of the icon.

OnSelect: Navigate('Thumbnail Gallery Screen', ScreenTransition.Fade)
Visible: IsBlank(varCurrentRecord)

Insert a Cancel icon in the top right corner of the screen. This will give the volunteer a way to close the screen when viewing a previously saved photo.

Put this code in the OnSelect property of the icon.

OnSelect: Navigate('Thumbnail Gallery Screen', ScreenTransition.Fade)
Visible: !IsBlank(varCurrentRecord)

Focusing On A Photo In The Gallery

Finally, return to the Thumbnail Gallery Screen. We must add one more line of code to allow the volunteer to view a photo stored in the SharePoint library.

Select the thumbnail gallery then write this code in the OnSelect property.

Set(varCurrentImage,  ThisItem.Thumbnail.Large);
Set(varCurrentRecord, ThisItem);
Navigate('Single Image Screen', Fade);

The Photo Gallery app in now completed.

Questions?

If you have any questions or feedback about Power Apps Add Picture Control And Save To SharePoint Library please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.