cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Community Champion
Community Champion

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

43 REPLIES 43
Frequent Visitor

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

Community Champion
Community Champion

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

Frequent Visitor

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?

Community Champion
Community Champion

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.

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?

Community Champion
Community Champion

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.

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

 

Regular Visitor

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.

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
Not applicable

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

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (7,994)