Uploading images to SharePoint list without using Flow

[MagnusGöransson]

Hello,

This is probably already known to you, but I learned about it yesterday so someone else migth as well find the method useful.

Problem: Taking a photo using the camera in a canvas app normally means that you must use a Flow to upload the photo to SharePoint.

Problem 2: When displaying photos from SharePoint in a canvas app most of the times means that the photo is loaded directly from SharePoint and not bu using the SharePoint connector which gives you permissions related errors in some cases.

Solution:

A really simple app with one Image Upload and one Button

The OnSelect code for the Button

Set(ImageBinaryRaw, JSON(UploadedImage1.Image , IncludeBinaryData));
Set(ImageBinary,Mid(ImageBinaryRaw, Find(",", ImageBinaryRaw)+1, Len(ImageBinaryRaw)-Find(",", ImageBinaryRaw)-1));
Patch(ImageUploadTest,Defaults(ImageUploadTest),{Title:"Test", Base64Image: ImageBinary});
Reset(AddMediaButton1)

This is what the SharePoint list looks like: 

This is the result screen:

Its a gallery with an image control. The code for the image control:

"data:image/jpg;base64," & ThisItem.Base64Image

Quite simple! 🙂

[MagnusGöransson]

That can definitely be accomplished. Here are some guidance: https://www.base64-image.de/tutorial 

[MJDBrooks]

---

---

This looks a really useful solution but for some reason I cant get the patch to update the multipleline sharepoint field. I have checked the Imagebinary variable and it shows as populated with the text string ok in Studio. Are there any known issues with limits on string length or other reasons why the patch would not work?

This is my button code - I am trying to update a staff record with a profile image. Thanks

Set(ImageBinaryRaw, JSON(UploadedImage1.Image, IncludeBinaryData));
Set(ImageBinary,Mid(ImageBinaryRaw, Find(",", ImageBinaryRaw)+1, Len(ImageBinaryRaw)-Find(",", ImageBinaryRaw)-1));
Patch(First(Filter(Staff, Initials = DataCardValue2.Text)),{ImageProfile:ImageBinary});
Reset(AddMediaButton1)

[MJDBrooks]

Sorry, I see I missed out the datasource in the patch! basic error. Works well now. 

Thanks for a great solution 🙂

[CP153319]

I have this working perfectly when I am using the App on my desktop computer and uploading a picture from the desktop computer. The image displays properly within the Powerapp itself and I'm able to create a JPEG image in a SharePoint library which I can open and view.

Where it fails is when I try to upload the image from a picture I've taken on my smartphone. I think that the picture taken on the smartphone is too "big" and therefor the creation of the image in the SharePoint library fails. I'm wondering if anyone has encountered this or if someone can confirm that they can take a picture on something like a Google Pixel 3 and that they are able to create a jpeg image in a SharePoint library (or OneDrive) with it?

[SyedShadab39]

The Binary data has been uploaded successfully to sp list now I need to display that uploaded picture in "Image" control.
I tried but not able to fetch it. based on the data table selected item I need to display the image. How can I achieve this?

[CP153319]

This is the code to display the image in an "Image" control in PowerApps:

"data:image/jpg;base64," & ThisItem.WhateverTheNameOfYourPictureIs

Note that, in the formula above where it says ":" please put an actual colon instead. You want to read "data : image / jpg" without the spaces.   

Note that I've found that using Bas64 cripples the speed of my SharePoint lists. Not sure if it's because the text string is so long.

[cfebvre]

This is great!

But as the user above mentions, it definitely cripples the SharePoint list even after just one image upload.

I'm currently using (one of) the Flow methods to upload images to Sharepoint which has it's own set backs - flow failures, convoluted workflow etc.

If I were to change to this method, there will be a large number of image uploads -  are there going to be stability concerns with the Sharepoint list using this method?

Cheers,

Chris

[cfebvre]

@Kelly-Cook Hi Kelly-Cook,

I've followed the additional steps in your comment, but I'm wondering now, how do I decode the Base64 string into file content within a flow as you mention?

Cheers in advance if you can provide any assistance!

Chris

[cfebvre]

I can confirm this method works really well, however, in my use case I immediately encountered an issue.

My app has 10 add image controls, and we need to store reasonably large images.

I created a test app, and loaded in 30 test list entries, each with the base64 data of 10 images in a multi line control (as outlined above in @MagnusGöransson's original post.

When I attempted to refresh the data source in my app, the gallery simply ground to a halt - it did eventually load the gallery items after around 5 minutes, but of course that doesn't bode well for a large list.

I expect my scenario is a lot bigger (in terms of the sheer amount of base64 data I'm trying to jam into my list) than most people would be doing, but just a heads up to people - there is a ceiling to the amount of base64 strings your list can have before it's starts compromising the load time of your app. 

Cheers,

[CP153319]

I'd just like to echo what @cfebvre wrote - This strings are so long that they render my SharePoint list unusable. 

What I found that works pretty well is to have an "Add Attachment" field in your app where the end-user can just attach as many pictures as they want from their camera roll.