cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
CamSims
Level: Powered On

Blob to Image in PowerApps

I have a flow which serves up an image as a Blob data type to PowerApps. I can't seem to get it to display as an image. Any recommendations on a conversion or solution in either PowerApps or Flow?

 

2019-09-18 14_05_17-MF API POC - Saved (Unpublished) - PowerApps.png

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Community Support Team
Community Support Team

Re: Blob to Image in PowerApps

Hi @CamSims ,

Do you want to display the returned image binary data from your flow within your app?

 

Based on the flow's configuration that you mentioned, I think there is something wrong with it. I have made a test on my side, please consider take a try with the following workaround:

Flow's configuration as below:5.JPG

 

App's configuration as below:6.JPG

 

7.JPG

 

Within your flow, please set the Inputs field of the "Compose" action to following formula:

body('HTTP')?['$content']

Then within the "Respond to a PowerApps or flow" action, please remove the File Output, instead, please add a "Text" Output, then set the Value to the Outputs dynamic content of the above "Compose" action.

 

Then within your app, set the OnSelect property of the "Fire Flow" button to follownig:

Set(ImageFileContent, ConvertAPI.Run().filecontent)

Then add a Image control in your app, set the Image property to following:

"data:image/jpeg;base64," & ImageFileContent

Please consider take a try with above solution, then check if the issue is solved.

 

Best regards,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

8 REPLIES 8
TurnerLab
Level: Powered On

Re: Blob to Image in PowerApps

PowerApps doesnt work well with Images - I'd suggest using the Camera feature, take a picture that sends the URI to MS Flow. Then using flow convert the image to Base64 and write that to your data source. 

 

 

CamSims
Level: Powered On

Re: Blob to Image in PowerApps

Thank you for the suggestion. I'm actually trying to do the reverse though.

 

I have a data source with an image that I want to display in PowerApps.

TurnerLab
Level: Powered On

Re: Blob to Image in PowerApps

If you're referencing image Selected Parent record from datasource gallery you can use: ThisItem.YourPictureURI  add a image object, select the image object and select the property Image. Add record reference: ThisItem.YourPictureResourceURI. If you're not using a gallery you will need to use LookUp() to find the record you wish to specifically display in the datasource.

TurnerLab
Level: Powered On

Re: Blob to Image in PowerApps

Also - Photodata that I record looks like this: 'data:image/png;base64,iVBOR........etc etc etc etc etc etc......'

 

Not sure how you are recording yours.  'blob:image/' might be the issue here

 

Sorry for broken thoughts - also working through some powerapps issues myself! 😄

 

CamSims
Level: Powered On

Re: Blob to Image in PowerApps

I'm not sure you're grasping what I'm trying to do.

 

I have a button in PA that triggers a Flow. The Flow then makes an API call which returns an image.

 

I'm trying to find out how to take that image from flow and then display it in PowerApps.

 

PowerFlow.png

Here is the output from the HTTP request:

HTTP Output.png

 

Here is the Compose output:

Compose Output.png

 

Highlighted
Community Support Team
Community Support Team

Re: Blob to Image in PowerApps

Hi @CamSims ,

Do you want to display the returned image binary data from your flow within your app?

 

Based on the flow's configuration that you mentioned, I think there is something wrong with it. I have made a test on my side, please consider take a try with the following workaround:

Flow's configuration as below:5.JPG

 

App's configuration as below:6.JPG

 

7.JPG

 

Within your flow, please set the Inputs field of the "Compose" action to following formula:

body('HTTP')?['$content']

Then within the "Respond to a PowerApps or flow" action, please remove the File Output, instead, please add a "Text" Output, then set the Value to the Outputs dynamic content of the above "Compose" action.

 

Then within your app, set the OnSelect property of the "Fire Flow" button to follownig:

Set(ImageFileContent, ConvertAPI.Run().filecontent)

Then add a Image control in your app, set the Image property to following:

"data:image/jpeg;base64," & ImageFileContent

Please consider take a try with above solution, then check if the issue is solved.

 

Best regards,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

CamSims
Level: Powered On

Re: Blob to Image in PowerApps

@v-xida-msft You're a PowerApps/Flow God!

 

Thank you very much for your solution, it worked like a charm. I can finally sleep again.

 

The one thing I had to adjust from your post that I was able to identify using your images is that when you typed:

 

Then add a Image control in your app, set the Image property to following:

"data:image/jpeg;base64," & ImageFileContent

The colon get's messed up by the forum. Between data and image is just a colon not ":"

 

Thank you again. This was a huge help.

sambel
Level: Powered On

Re: Blob to Image in PowerApps

How would we parse the HTTP response if more than one image is returned in the body?

Below expression returns the 1st image. 

body('HTTP')['$content']

Below expression  returns an object

body('HTTP')

Like

{"statusCode":200,"headers":{..},"body":{"$content-type":"...","$content":"..."},"body":{"$content-type":"...","$content":"..."},"body":{"$content-type":"...","$content":"..."}}

ParseJSON operator could not parse.

 

What actions/expressions would return an array/collection of $content?

 

Thanks in advance.

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 181 members 5,783 guests
Please welcome our newest community members: