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

[UB400]

@Meneghino this is a great solution. I had trouble converting to jpeg. I tried several online Base64 converters but did not have any success with any.

The text (for the image) I'm getting in SP reads blob:F399D798-xxxx-xxxx..... So I copied the text after the colon and inserted that into an online converter that converts from base64 to images but it did not work.

Could you kindly expand on the procedure to convert jpeg?

Is there support in Flow to then upload the jpeg images to SP or similar?

[Meneghino]

Hi @UB400

The text of the image I get using the above app begins like this:  data:image/jpeg;base64,/9j/4AAQSkZ...

It is very strange that we are getting two different texts, did you pick the Url property?  I use SharePoint on line

In my case then all I needed to do is to take all the text after the "base64," and paste in a base64 to jpeg converter.

Please let me know.

[UB400]

@Meneghino what I noticed is that if I use a Surface, it generates text starting with "blob" which then does not display on an iPhone. If I take a photo with an iPhone that generates the "data:image/jpeg;base64" text

The Surface displays all images, the ones generated by the Surface as well as the images generated by the iPhone.

[Meneghino]

@UB400, clear.  I use the iPhone.  In any case this is a work-around until the proper capabilities are built into PowerApps

[UB400]

@Meneghino no worries. It's still a useful work-around, thank you very much for sharing.

[Anonymous]

Hello,

Regarding the blob - Base64 issue, I am using a laptop to run your App, and just discovered that if you use the desktop application you are getting a blob like 9DC98C85-1494-4201-9B1B-F663D1836290, but if you run the application using browser you are going to get the base64 large code when it uploads to SharePoint.

I am working on some sort of mechanism using Flow to upload it back as an image, if anyone get a clue doing it, please share it with us 😉

Best regards.

[Meneghino]

Hi @Anonymous, hopefully we will not have to work with hacks for much longer.  In the meanwhile I will state the obvious but in order for this work with flow we would either need to have access to some variable manipulation functions in Flow (i.e. a function that would convert base64 to bytes) OR someone could create a custom api to do the same conversion using a free service somewhere.  I am not expert enough in api's to do the latter, but maybe someone out there is...

[Anonymous]

Thank you very much. That was the best and it moved me forward. Again thank you.

Jeff

[DK]

I also get.blob:textString on windows tablet. i tried attachments in share point and added url field as picture to display attachment. Picture shows in sp but not in PA App