cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Meneghino
Level 10

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

41 REPLIES 41
UB400
Level 10

Re: Solved: How to save captured images in SharePoint

@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
Level 10

Re: Solved: How to save captured images in SharePoint

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.

 

00.jpg

UB400
Level 10

Re: Solved: How to save captured images in SharePoint

@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
Level 10

Re: Solved: How to save captured images in SharePoint

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

UB400
Level 10

Re: Solved: How to save captured images in SharePoint

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

AleixRuiz
Level: Powered On

Re: Solved: How to save captured images in SharePoint

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
Level 10

Re: Solved: How to save captured images in SharePoint

Hi @AleixRuiz, 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
Not applicable

Re: Solved: How to save captured images in SharePoint

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

 

Jeff

DK
Level: Power Up

Re: Solved: How to save captured images in SharePoint

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

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 88 members 5,470 guests
Please welcome our newest community members: