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

[Anonymous]

Such a great workaround and really get my problem fixed.. thank you so much Meneghino.

[Tom_Slosse]

Hey @Meneghino

Thanks for this workaround! Unfortunately this only works with the camera option and not with the add a picture control(I tried to save a uploadedImage to a sharepoint list in a Picture field and a Multiple lines of text fields both didn't work, or am I doing something wrong?).

But I still got some problems displaying the images in the vertical gallery. Any idea how to fix that?

Please let me know if someone knows how to save pictures into SP from a add a picture control.

Kind regards

Tom

[Meneghino]

HI @Tom_Slosse

I am no longer actively exploring this, as it should be the PA team's priority to get pictures working properly with SP.

Let's wait and see if and when they do.

[Tom_Slosse]

Hey @Meneghino

Thanks for the information. 

I thought they would have implemented this by now since this is a long term problem

Kind regards

Tom

[Anonymous]

Sadly this doesn't work anymore. Anyone has found another workaround to this ?

Edit: It does work, like it has been pointed out, I did a mistake while configuring the SharePoint column. Thanks!

[JonC]

This is still working, I use it in several apps. The only catch was to make sure the field that you store the picture info in is the correct type as I noted in an earlier comment.

[Anonymous]

Hi Meneghino,

Thanks a lot for the work around in getting pictures captured in powerapps and then updated to a SharePoint list.

I was able to simulate what you've done and it all worked for me. I am running into another (related) problem tho. 

I am building an app now where i can score booths based on certain criteria, one of which is adding 2 pictures of the booth to the record.

What i have done is create the scoring screen where i navigate to the camerascreen to capture the Image. I would like to pass the taken photo to the scoring screen but i can't simply because once when i navigate to the camerascreen, i lose data of the new record that i initiated in the scoring screen.

Do you know what is the best way of passing the data of the new scrore screen to the camera screen, then taking all the data (including the image) and store it as a new record in a sharepoint list?

Your help is appreciated.

[Anonymous]

Hi Fatima, 

I could help you but I need a bit more Information:

- How did you make your score screen? is it simple fields that you've made separately or is it a form, or a list screen based on your SharePoint list? 

- I see that you've mostly used the "staring" item in Powerapps. These can currently only be stored as numbers in a Sharepoint column. Is this what you want to have?

Storing 2 pictures in a local collection can simply be done by creating 2 different collections. you would then refer to the one you want to have, as it has been shown in the tutorial.

[leyburn19]

I got this to work with an image,  but I am really stuck trying to get it to work with the pen input control.  I get it to save to sharepoin ok but it has BLOB instead of DATA and when I save a new record the previous record is balnked.  Currently on teh pC I get a result like:

blob:https://create.powerapps.com/e7b53e57-b5b3-470a-abd3-f99104202d56

On my phone I get

blob:http://localhost:50027/80326677-7f5d-435c-b7cd-42cc65a966ce

Are you able steer me in teh right direction please.  I simply want to capture a signature with each transaction.  Any help is really appreciated

[anros]

This Topic is excellent .

In my case 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 startin with data:image/jpeg;base64,/9j/4AAQSkZJRgAB..... etc. But looks empty back on the iPhone PoweApp.  

Any recomendatrion?

Cheers, Anros