Solved: How to save captured images in SharePoint

[Meneghino]

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,"

[JonC]

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.

[leyburn19]

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

[dakridge]

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

[leyburn19]

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

[dakridge]

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

[thedatawhittler]

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

[Ankit_Shukla]

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

[Office365Master]

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

[Svante]

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

[JD2301]

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?