cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Community Champion
Community Champion

Solved: How to save captured images in SharePoint

It is possible to save images taken with a camera to SharePoint by saving the image's Url property to a "Multiple lines of text" type column in a SharePoint list.  This works because the Url property contains the image data in base64 format, and you can see this if you display the Url property in a text box.

 

NB: This is not going to work in all environments, please see following discussion for details

 

Here is how to make a working app, screenshots below:

  1. Create a new list in SharePoint called "PowerAppsImages" and add a "Multiple line of text" column called "MyImageData"
  2. Create a new blank mobile PowerApp
  3. Connect PowerAppsImages as a data source
  4. Add a second screen (Screen2), and go back to Screen1 (the landing screen)
  5. In the landing screen create a camera control and set its OnSelect property to:
    ClearCollect(LocalImage, Camera1.Photo); UpdateContext({PhotoDateTime: Now()})
  6. On the same screen create an image control and set its Image property to:
    First(LocalImage).Url
  7. On the same screen create a text input and set its Default property to:
    "Photo taken "& PhotoDateTime
  8. On the same screen create a button and set its Text property to "Save to SP" and its OnSelect property to:
    Patch(PowerAppsImages, Defaults(PowerAppsImages), {Title: TextInput1.Text, MyImageData: First(LocalImage).Url})
  9. On the same screen, create a right arrow icon and set its OnSelect property to:
    Navigate(Screen2, None)
  10. Now change to Screen2 and create a left arrow icon and set its OnSelect property to:
    Back()
  11. On Screen2 add a refresh icon and set its OnSelect property to:
    Refresh(PowerAppsImages)
    This is needed because the delete button (to be added in subsequent steps) does not always refresh
  12. On Screen2 add a text box and set its Text property to:
    "Total count of images: "&CountRows(PowerAppsImages)
  13. On Screen 2 create a vertical custom gallery and set its Items property to:
    PowerAppsImages
  14. In the gallery's template create a text box and set its Title property to:
    ThisItem.Title
  15. In the gallery's template create an image control and set its Image property to:
    ThisItem.MyImageData
  16. In the gallery's template create a trash can icon and set its OnSelect property to:
    Remove(PowerAppsImages, ThisItem)
  17. Save and enjoy

 

I would be welcome for any feedback, particualrly if this does not work for someone.

 

PS You can turn all of the images into real jpg files by converting the base64 text to bytes with any online converter, just make sure you take only the text after the initial "data:image/jpeg;base64,"

 

__.JPG000.JPG

43 REPLIES 43

I never had a chance to dig much furthur into this to get blob images to work. This looked to be the best route though.. https://powerapps.microsoft.com/en-us/blog/custom-api-for-image-upload/

you will have to put it into online blob storage and link over to that url in sharepoint or potentialy once it is in online blob storage you may be able to convert it to a base 64 image string and bring it back to sharepoint.

I suffer the same issue.  It is because when you do it the blob detal is asved but it is based on a cache in your PC, Tablet, or Phone.  Evertime you close your App the cache is deleted so it comes up blank.  I have been watching this video on YouTube.  Very Complex but I feel it will get me there in the end.  It may help others https://www.youtube.com/watch?v=mp-8B1fLrqs

It appears that SharePoint does have it in Rich Text by default.  When I canged this setting it worked perfectly.   Thanks 

David K Akridge
Chief Information Officer, Mobile County Public Schools

Are you saying you got it to return the image as a "blob".  I can't.  I have tried changing teh field to Rich Text but still does nothing

I actually got this working today with my personal app by just saving the "First(LocalImage).Url" into my current records.  I works perfectly.  I had to go back into the Sharepoint list and edit the column and turn the toggle off for reach text. 

 

David

David K Akridge
Chief Information Officer, Mobile County Public Schools
New Member

Hello, thanks for posting that.

 

I'm having trouble setting the image property as .Url, keeps displaying an error message of Invalid Name.

 

I'd really appreciate any advice on this.

 

Thanks in advance 🙂 

 

Gavin

New Member

Hello;

     I am facing a problem. I have saved image in sharepoint list successfully. But It is not showing in image control of  galary. Although if I fill Image property of Image manualy, it works fine (Like:  Image= "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQE.......")

 

But it is not working when I us Image = ThisItem.MyImageData

 

Please help

Advocate V
Advocate V

Displaying SharePoint Images Powered Up Style In PowerApps

Display any image stored anywhere in SharePoint Online, rendered within an app in any resolution / quality as you so desire and highly compressed in size vs. the original image actually stored in SharePoint.

Desktop Video Demo

Mobile Video Demo

Frequent Visitor

All I get is those nasty red warnings all over.. Whyy? ;D

This is the exact same thing I am looking to do, I have a scoring screen identical to yours. 
I have a column in a sharepoint list titled "ImageA1" - I want to take a picture and it upload into this column of my list. Have you figured out how to do this yet?

Helpful resources

Announcements
News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

Power Apps Community Call

Power Apps Community Call- January

Mark your calendars and join us for the next Power Apps Community Call on January 20th, 8a PST

PP Bootcamp Carousel

Global Power Platform Bootcamp

Dive into the Power Platform stack with hands-on sessions and labs, virtually delivered to you by experts and community leaders.

secondImage

Power Platform Community Conference On Demand

Watch Nick Doelman's session from the 2020 Power Platform Community Conference on demand!

Top Solution Authors
Top Kudoed Authors
Users online (6,964)