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

[CG]

Txs for brilliant post. It worked using the iPhone. Being new how can I convert the multiple line entry to an actual image?

[Meneghino]

Hi @CG

Please have a look at the PS of my initial post, please let me know if this is not clear or if this is not what you are looking for.

You can google for on-line converters

[CG]

Dear @Meneghino! Thank you for the reply. As I am new but willing to learn, I found converters but do I convert the string in the PowerApp before adding to SharePoint or write code in SharePoint?

[Meneghino]

Hi @CG

If you only need to use the image in PowerApps, then there is no need to convert. PowerApps will read the text and display it as an image in PowerApps.

You need to convert only if you want to obtain the image file as a jpeg file in another application.

[mrigau]

Partially working for me.  The Url data is uploaded to Sharepoint but the MyImageData is empty on the Galery of screen 2.  Do I need any other settings to display the image?  Images uploaded from the iPhone show in Sharepoint starting with data:image/jpeg;base64,/9j/4AAQSkZJRgAB..... etc.

But looks empty back on the iPhone PoweApp.  Any recomendatrion?

[Meneghino]

Hi @mrigau

I have a few apps that are not working as they should any more after the recent PowerApps version update.  The above approach was always a work-around anyway, so let's hope that the PowerApps team give us the possibility of using images from SharePoint without the need for work-arounds.

[mrigau]

So that update may explain why it is not working for me.  Thanks for the great post and helping the comunity!

[JonC]

I ran into some issues myself with the same. make sure the multiline text field that you are useing in share point is plain text. If you use the rich text option it does not convert back to an image.

[PierreParmentie]

Excellent post, thank you very much for that work around !

I'm getting weird issues thought, the images which are saved as blob disappear after few minutes but the line is still intact in my list.

Any idea why ? 

From a phoe with the jpeg:base64, I have no issues, pictures are saved with no problem and show up everytime.

[Anonymous]

This Topic is excellent, but in my case occurred a error.

When i click for to submit, in the display appears: "An unknown Error Occurred."