Power Apps Add Picture Control And Save To SharePoint Library

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

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)

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.

Matthew Devaney

Subscribe
Notify of
guest
62 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Ryan
Ryan
1 year ago

That’s awesome, Matthew! Thanks! Will the phone display the images as well? I’ve read (and experienced) problems with users being able to see the images through the mobile app.

Narges
Narges
1 year ago

Hi, j’ai une erreur au niveau de Ok icon. Any help?
I verified the script in french but i can’t find the erreur:

‘BlogImages:UploadPhotoToSharePoint’.Run(varJSON; txt_SingleImage_Caption.Text);;

Narges
Narges
1 year ago

The flow doesn’t work. In massage error: Varjson is not known ( not blue) and number of parameters is not good.

Jamaat
Jamaat
1 year ago

I have this error message in “Creat File” section :

InvalidTemplate. Impossible de traiter les expressions de langage de gabarit dans les entrées d’action « Créer_un_fichier » à la ligne « 1 » et à la colonne « 15154 » : « Impossible d’évaluer l’expression de langage de gabarit « base64ToBinary(triggerBody()[‘Createdfile_FileContent’]) », car la propriété « Createdfile_FileContent » n’existe pas ; les propriétés disponibles sont «  ».

Andre
Andre
1 year ago

I guess is the same error I am having:

Unable to process template language expressions in action ‘Create_file’ inputs at line ‘1’ and column ‘7837’: ‘The template language function ‘base64ToBinary’ was invoked with a parameter that is not valid. The value cannot be decoded from base64 representation.’.

Any thoughts?
Thanks.

Ramesh Mukka
Ramesh Mukka
1 year ago

This is so wonderful. How can we modify this app to store the picture in image column of SharePoint list? The flow doesn’t show image column on Update Item action. Does it mean its even more complex to save it to Image type column?

Last edited 1 year ago by Ramesh Mukka
Anandavadivelan Vijayaragavan
Anandavadivelan Vijayaragavan
1 year ago

Hi Mathew, great post as always. I have used this flow method and image libary in one of my apps, that you describe here and another method without flow where I have used the JSON function directly inside powerapps and store the imagebinary data in a sharepoint list multiple lines field. Do you have a view on how these two compare and which method is better over the other if so? Would be great to hear your thoughts on this. Thanks! /Anand

yas
yas
1 year ago

how would this work if you had multiple images and patch a collection that has 4 Photo Variables? how would I pass 4 of these through to flow?

Soumit
Soumit
9 months ago

What does this code do?
{
contentBytes: img_SingleImage_Image.Image,
name: Text(Now(), “yyMMddhhmmss”)
}

I am getting an error Invalid argument type record, expecting a text value instead

Soumit
Soumit
9 months ago

Awesome thanks a lot!

Mandy
Mandy
6 months ago

Matthew, I’m getting the exact same error and cannot get it repaired. Has something changed with PowerApps that would make this an issue now? I’m self-taught with Power Apps so I’m not sure I completely understand what you mean by the response above. My flow works perfectly when tested and looks exactly like yours.

Mandy
Mandy
6 months ago

See below

Screenshot 2022-03-22 095945.png
Mandy
Mandy
6 months ago
Reply to  Mandy

and code

Screenshot 2022-03-22 095851.png
Mandy
Mandy
6 months ago

Ha, getting close. The error in the powerapp is working now but now my flow is failing. Similar to others responses on here so now i’m getting this error.

I tried some of the other fixes that are mentioned but those seem to break my app again and theirs seem to be in dutch or french 🙂

Screenshot 2022-03-23 170903.png
Mandy
Mandy
6 months ago

It already was required.

Mandy
Mandy
6 months ago

I really appreciate all your help. I’m getting so close 🙂 Now, the flow succeeds, the app appears to upload a file but when i go to open it in SharePoint I get this error after it asking me to download the picture. IF I just test the flow and pick a jpg from my computer it works fine, but if it’s coming from the app (either on pc or on mobile device) it asks me to download the jpg and i get this error.

Screenshot 2022-03-29 094013.png
Patrick
Patrick
6 months ago
Reply to  Mandy

I had this issue and found that replacing
{
contentBytes: img_SingleImage_Images.Image,
name: Text(Now(), “yyMMddhhmmss”)
}
with
{file:{
contentBytes: img_SingleImage_Images.Image,
name: Text(Now(), “yyMMddhhmmss”)
}}
solved the issue. It seems like it may be something to do with environments because I moved my solution to a different environment and it worked fine without adding {file:

pascal
pascal
1 month ago
Reply to  Patrick

Thank’s !!! Patrick 😉 It works now ! and thank you also Matthew 😉
(French Maker)

Last edited 1 month ago by pascal
Rolands
Rolands
28 days ago
Reply to  Patrick

Had the same problem. Adding ‘file’ fixed the issue for me as well 🙂

Last edited 28 days ago by Rolands
Mandy
Mandy
6 months ago
Reply to  Mandy

Patrick!!!!! That fixed it! Thank you and Matthew so much!! I’ve been fighting with this simple little app for too long.

Mandy
Mandy
5 months ago

I don’t know why it works but it works 🙂 BUT….now I’m getting this error in the mobile app (not while using app on pc). It still uploads the photo to sharepoint but gives the user the error so it appears that it didn’t work.

ErrorFlow.jpg
Marco
Marco
9 months ago

Tried to copy this, but the part for the OnSelect for the check-icon gives me errors. When I use the following code, the PowerApp is OK, but the Flow gives me an error, while trying to create the file, about the data being text. What’s wrong?

UploadphototoSharepoint.Run(
    txt_SingleImage_Caption.Text,
    {
         contentBytes: img_SingleImage_Image.Image,
         name: Text(Now(), "yyMMddhhmmss")
     } 
 );


// next screen
Navigate('Thumbnail Gallery Screen', Fade);
Marco
Marco
9 months ago

Hi, the error message is in Dutch … I hope you know what it means.

snip.PNG
Eva
Eva
7 months ago

Hi,
Thank you Matthew for this very usefull and easy to read article.
For French users like me (who have the following error) try this :

‘ImportPhoto’.Run(txt_SingleImage_Caption.Text;{file:{name:Text(Now();”ddmmyyyy_hhmm”); contentBytes:img_SingleImage_Image.Image}});;Navigate(Question_19; Fade)

erreur.JPG
Xuejing
Xuejing
6 months ago

Hi Matthew, I followed the steps but I have an error in the flow. The code in the onselect for the check is appended below. Please advise on how to rectify the error. Thanks!

‘SafetyInspectionLog’.Run(
  Observation.Text,
  {
     name: Text(Now(), “yyMMddhhmmss”),
     contentBytes: img_SingleImage_Image.Image
   }
 );

Navigate(‘Screen1’, Fade);

flow error.JPG
xuejing
xuejing
6 months ago

yea… I did… but when I set it to required, there was a runtime error on the app…

huang xuejing
huang xuejing
6 months ago

Hi Matt, I got this runtime error when i tried to run the app with the flow

runtime error.JPG
huang xuejing
huang xuejing
6 months ago

Hi Matt,

I tried again and got this error on the app. The flow is not triggered.

runtime error app.JPG
Chris
Chris
6 months ago

This is just what I needed to get started with an image gallery app for a project for work as haven’t seen many examples of people making apps featuring an image gallery!

Chris
Chris
6 months ago

Hi Matthew,

These are some of the requirements I’ve been given – do you think any of them are doable in an app or do you think it would be better just done in SPO with some funky JSON formatting on a document library?

  • Quick and easy to upload photos / bulk upload
  • Tag photos
  • Search functionality
  • For instance – upload photo of colleagues, tag with the word “diversity”
  • Share direct link to photo, whether that’s to the photo in it’s document folder or a deep-link to the photo in the app
  • View photos remotely – view low-res readable photo when on a slower connection but still be able to view full high-res image
  • Share photos, graphics, vectors via email or into other applications
  • Different formats like jpg, png, svg
  • Archive photos? For example when someone leaves have ability to tag photo as “Archive” and have these photos archived/deleted
  • Favourite photos? Eg Star a photo – so you can go to your favourites screen and see any photos you have starred previously for ease of access
Youssefkey
Youssefkey
5 months ago

Thankss a lot!!!
Keep Goinggggg !!

Charlotte
Charlotte
4 months ago

Hi, I really appreciate this! I am having one issue, when I open up a photo from the gallery it doesn’t dispay a caption, only the [No Caption]. I can’t tell what I’m missing. Thanks

Charlotte
Charlotte
3 months ago

Thank you, that makes sense!

Eduardo
3 months ago

Great article, definitively the Add Picture control works more better than the Camera, thanks Matthew 👍👋👋👋👋

zidane
3 months ago

very clear and good article easy to understand. Thank you

Hector
Hector
1 month ago

Is it possible to create an auto scroll carousel image from an document library?

Deep Ponkiya
1 month ago

This Soluction Not Working