Decode Base64 string as image and Display using .image property in Powerapps

Question

This isn't a question, but I wanted to share the solution since I wasn't able to find much about it googling.

I am creating a tool for my company using PowerApps. I needed to store a set of data along with 2 pictures for each entry. The data and pictures were stored in pdf files, I parsed the data out, and encoded the pictures into a base64 string (Field: VarChar MAX), using PowerShell and uploaded it into a SQL (2005) server onsite. I connected my onsite SQL server to PowerApps through the Gateway program provided by PowerApps.

My problem was displaying the stored pictures in the application, without using any different data connectors or extreme coding. Using the IMAGE object, Image.image = "data:image;application/octet-stream;base64,"&PassingID.PictureOpen
where PassingID.PictureOpen = the Base64 string.

Mytilene

Could you please clarify if you converted the pdf to an image, and if so to which image type? Could you also please clarify if by 'IMAGE object' you mean an image control in PowerApps? Are you then setting the image control's Image property to "data:image;application/octet-stream;base64,"&PassingID.PictureOpen ? Any luck with a similar approach to a pdf viewer control in PowerApps? – Costume

@Costume Indeed. I apologize I should have explained the process more. I parsed the PDF file out into 2 datatypes: strings and .jpg for the images. I then took the strings and converted them to the right datatypes for the SQL database. The Image object is the Image Control . in order to display the .jpg you need to set the .image property to all that jazz that is highlighted in the original post. You should be able to do something similar with the Gallery control. I would think you should be able to create a item list for the gallery. But I have not tried as of yet. – Mytilene

I just spotted you on the Powerapps forums. lol – Mytilene

Answer 1

Using the IMAGE object, Image.image = "data:image;application/octet-stream;base64,"&PassingID.PictureOpen where PassingID.PictureOpen = the Base64 string.

The really important part here is using quotes "", and data:image;application/octet-stream;base64, You can replace image with audio, for audio features. I assume a similar setup can be used in the Gallery object as well.

Mytilene

You, sir, are an absolute saint!!! Thank you so much for posting this - it's been driving me mad for about 2 days!! – Dumpish