cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
MagnusGöransson
Kudo Collector
Kudo Collector

Uploading images to SharePoint list without using Flow

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: 

 

image3.JPG

image2.JPG

This is the result screen:

 

image4.JPG

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

 

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

 

Quite simple! 🙂

 

24 REPLIES 24

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

MJDBrooks
Frequent Visitor



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)

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

 

Thanks for a great solution 🙂

CP153319
Helper V
Helper V

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
Helper I
Helper I

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?

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
Advocate V
Advocate V

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

@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
Advocate V
Advocate V

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,

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. 

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Top Solution Authors
Top Kudoed Authors
Users online (1,154)