Power Apps Best Method for Storing Images in a SharePoint List Column - sharepoint-online

Question

I have a Power App that will be used to upload a short text message and an image. There will ultimately be several thousands of these images uploaded over the next 12-24 months so I need a reliable method of storing the images in a SP List and a reliable method of displaying the images within the Power App. My SharePoint list column type for storing images is text multi-line. I saving the images via Patch(). I am using an Add Media Button which produces an image attachment that has the name "UploadedImage1".
I have tried two methods for storing the images in a SP list where the column type is text multi-line.
// Has intermittent issues displaying images stored in the SP List
Patch( ShoutoutsData, Defaults( ShoutoutsData ), {
Title: Value(Text(Now(), "[$-en-US]yyyymmddhhmmss")),
Image: UploadedImage1.Image
} )
// Works but Image column is sometimes storing large image files and it does not require very many image uploads before the SP list starts having issues displaying in a browser (you get the "The browser is not responding do you wanna wait" message
Patch( ShoutoutsData, Defaults( ShoutoutsData ), {
Title: Value(Text(Now(), "[$-en-US]yyyymmddhhmmss")),
Image: Substitute(JSON(UploadedImage1.Image,JSONFormat.IncludeBinaryData),"""",""),
} )
As noted in the comments above each Patch() formula, there are issues with each method and therefore I need an alternate approach to this. Any recommendations?

Answer 1

When I've done this in the past I've used Base64 and saved it to a sharepoint list as a string.

Answer 2

This is a Power Apps/Power Automate solution to save to OneDrive - Save to SharePoint similar approach:
Create your Power Automate Flow first as this will be needed in Power Apps.
Use Power Apps as the trigger.
Add the Parse JSON step to extract JSON items from the Power Apps trigger. Content should be "Ask In Power Apps", then it will fill in with "triggerBody()['ParseSON-Content']". Schema should be as follows (copy and paste):
{
"type": "array",
"items": {
"type": "object",
"properties": {
"Name": {
"type": "string"
},
"Pic": {
"type": "string"
}
},
"required": [
"Name",
"Pic"
]
}
}
Select Create file step (to one drive). (If saving to SharePoint, use the create or update item step). Add folder path. For File Name, select Parse JSON "Name" in Dynamic content selection.
Due to the nature of the array being passed into Power Automate, when selecting the "Name" from the Parse JSON list, it will invoke an "Apply to each" condition as follows:
For File content, add the expression as illustrated:
The use of the decodeDataUri expression decodes the picture format from Base64 into a format suitable for using in OneDrive (or SharePoint).
Your completed Power Automate Flow should appear as follows:
In Power Apps:
Create your app with the addmedia control and a Save Image button as follows:
Create a collection of the image and name for an image by adding the following to AddmediaButton1 (part of add media control) OnSelect property: ClearCollect(pics, { Pic: UploadedImage1.Image, Name: Rand()&".jpg"}).
Add to the OnSelect property of the SAVE IMAGE button:
a. Set(MyPics, JSON(pics,JSONFormat.IncludeBinaryData)); - create a variable MyPics, formatting the collection "pics" with binary data.
b. Call your power automate flow, passing in the variable "MyPics"created above into the flow.
When you run your Power Apps application, invoke the add media control, it will create the collection when you load or change the image/media. When you go to save the image, it will trigger the flow and result in a file being saved to OneDrive (or SharePoint) with a random file name with the .jpg extension as follows: