What is the BEST way to upload images to a Sharepoint List from PowerApps Add Image Control?

[cfebvre]

Hi All,

So this has been an ongoing saga for me. The means by which PowerApps and SharePoint handle images means I'm in a constant catch-22 situation.

So far as I'm aware, there are three primary ways to upload an image to a SharePoint List item from Powerapps.

Attachment Control: The attachment control is by far the simplest way, and least prone to having things go wrong. However, if you need multiple attachments to be in a specific order, or you need the attachments to correspond to other controls in your app in a visually easy to understand way, you're out of luck. The attachment control orders attachments alphabetically - too bad, too sad if you need it to do anything else.

Add Image Control (Flow Method): So then you say to yourself, "Okay, I'll use X amount of image controls, and have text input controls beside them so users can write captions. Visually, this will be easy to understand for users.

Then I'll run a distinct Flow for each control that uploads and renames the image alphabetically - Image001, Image002, etc.

And this works pretty well, but flows fail periodically, and you're app runs up to 10 flows per new item (assuming users don't make a mistake and need to delete an image - which is another flow run). It's messy, and bloated.

Add Image Control (Base64 Method): Then you come across the ability to grab the base64 data of an image, and you can patch that data into 10 distinct SharePoint columns in your Datasource.

https://powerusers.microsoft.com/t5/Building-Power-Apps/Uploading-images-to-SharePoint-list-without-...

No need for flows. No need for renaming images (as the base64 data gets stored in a distinct column - and bonus - you can make the thumb of the image control display the image with the base64 string! Hooray! But then you realize that all that base64 data in 10 multi line columns means Powerapps can't load the datasource to a gallery anymore. It takes 10 minutes to load 30 test items to your gallery. And you want to pull your hair out. 

Has anyone figured out a neat, simple method to get images into a Sharepoint List from Powerapps? Why is this so hard?

Thanks in advance if anyone has any ideas. As a bonus reward, If you manage to solve this issue, I'll forever worship the ground you walk on.

Chris

[VDS_Mantra]

Hi, 

Transfer Image from Power Apps Add Picture Option to share Point Using JSON

Use the add Picture option from Power apps and call the Flow from one Button by using this command:

UploadaphototoSharePointfromPowerApps.Run(JSON(UploadedImage1.Image,JSONFormat.IncludeBinaryData))

And on Flow use the trigger of power apps and use the “Compose” Action from Data operation and give the Input by using expression “triggerBody()['Createfile_FileContent']” and then use the share point option “Create File” and give the details of Share Point Site & Library.

[Michael_Shen_JT]

No good option i believe, post binary data depends on the connector(I do see some built-in connector like cognitive service can post binary data in powerapp).

For sharepoint connector in powerapp, we can only post base64 data directly.

Another challenge is powerapp doesn't support authenticated URL of image.

[cfebvre]

Okay, I believe I've finally worked it out. I've tested it pretty extensively now and I think I have it.

There's a bit involved, so I will take everyone through step by step.

Thanks to user MagnusGöransson who gave me the original inspiration for this idea from this forum post:

https://powerusers.microsoft.com/t5/Building-Power-Apps/Uploading-images-to-SharePoint-list-without-...

Step 1) Split your datasources

The primary issue with Magnus's method was that attempting to store all that base64 data into a single data source meant that loading it in a gallery (in PowerApps) was impossible. The gallery just wouldn't load if you had 30+ items in your datasource with base64 strings in each item.

For this example I'll assume everything in your app comes from 1 primary datasource that contains everything. What you will need to do is split your datasource so that your Base64 string column is housed in it's own datasource, while everything else is in your primary datasource (text columns, choice columns etc).

Your secondary image datasource will look like this:

Your Title column should be a signle line of text column that contains a digit that mirrors your primary datasource ID column. Your Base64 columns are Multiline text columns.

Your Title column should be a single line of text column that contains a digit that mirrors your primary datasource ID column. Your Base64 columns are Multiline text columns.

Step 2) Hide your Base64 columns in Sharepoint

Once you have determined how many images you will need to store per form item in your app ( I need to store up to ten images per form item), and created that amount of columns in your secondary datasource, it will be necessary to hide those columns in your secondary datasource. If you don't hide them, the Sharepoint list won't load when you try to navigate to it in Sharepoint.

Step 3) Load both your datasources into PowerApps

If you haven't got one already, you'll need a custom card in your form, with an Add Image Control for each image.

*You'll also need a view only Datacard in your form that refers to the ID of the item in question*

Mine is called 'TextIDFormTextField'

It will look something like this:

Note the naming conventions of controls in the sidebar, and insert your own labels in the formula.

Step 4) Use this formula

Set(ImageBinaryRaw, JSON(Image001Thumbnail.Image , IncludeBinaryData));
Set(ImageBinary,Mid(ImageBinaryRaw, Find(",", ImageBinaryRaw)+1, Len(ImageBinaryRaw)-Find(",", ImageBinaryRaw)-1));
Patch(ImageListExample, LookUp(ImageListExample, Title = TextIDFormTextField.Text) ,{Image001: Concatenate("data:image/jpg;base64,", ImageBinary)});

You'll need to replace 'Image001Thumbnail' (Grey Thumbnail box in screenshot above) and 'ImageListExample' (Secondary Datasource). Please note: the forum doesn't like the 'data:image' string in the formula above, refer to screenshot ^^

Step 5) What the heck does this do, exactly?

Okay, so what this formula does is it looks up the secondary datasoucre and finds the item whose 'Title' column matches the ID of the primary data source list item. Then it patches the Base64 data into the appropriate Base64 column of the found item in the secondary data source.

Step 6) Viewable Thumbnails

The last step to ensure you've got this working right (and to give visual feedback to the end user that they've stored the image and can look at it again any time they open the item in question), is to have the thumbnail display the correct image.

Use this formula:

If(IsBlank(Image001AddButton.Media), LookUp(ImageListExample, Title = TextIDFormTextField.Text, Image001), Image001AddButton.Media)

Here we are once again looking up the secondary data source, cross-referencing the ID of the primary list item with the Title of the secondary list item, then pulling in the Base64 string into the thumb. 

And Voila, it works:

Yes, I am a massive nerd.

[mgudites]

Still struggling with this, using the Shoutout template that Microsoft provides. It baffles me how functionality that should be "day one" type stuff still doesn't exist.

[w1sd0m]

Power Automate can do this easily.

[cfebvre]

You're right @w1sd0m , I do mention Flow as a potential option, however depending on your use case, this is a bloated method just to store images on a form, (plus the potential to increase licencing costs depending on your set up). The method I described above has been working without issue for over a year now. I'm not thrilled about the concept of storing base64 data in a multiline column, but so far the Sharepoint List hasn't run into any problems. I'm going to look into a better method soon, and will update this thread if I find one.

[ShehanRa]

How ??

[WarrenBelz]

@ShehanRa ,

This blog of mine may assist. If you have further questions, please post a new thread.