cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper II
Helper II

Working With Images In Power Apps

Hi,

 

 

Is there a way i can take an image from Power Apps, pass it to a flow, get it converted into PDF and then store it in one drive or Share Point online.

 

Kindly advice how i can proceed and achieve this goal.

 

Regards

Srinath

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Community Support
Community Support

Re: Working With Images In Power Apps

Hi @Srinath , 

Firstly, please check if you have create your flow and app based on above solution I provided above step by step.

 

Within your flow, you need to create a image file in your SP Library firstly based on the passed image data from your canvas app. Within your flow, you need to use the following expression to convert the passed image data uri data into a Binary data:

dataUriToBinary(outputs('PictureData'))

Within your canvas app, you need to use JSON function and Substitute function to convert the attached image into a json string, then pass the json string to your flow:

Substitute(JSON(UploadedImage1.Image, JSONFormat.IncludeBinaryData), """", "")

 

On your side, please check if the stored image file in your SP Library could be opened correctly. If not, I think there is something wrong with your flow's configuration and app's configuration.

When embedding image data within a PDF file, please make sure you have checked the blog I listed above. Within your flow, you need to use concat expression to concatenate the image file content with the passed HTML text into a whole HTML text value.

 

I have attached the sample flow and canvas app, please check the attached file. Please edit it within your Power Automate and Power Apps, refer to them, and configure your own flow and app.

 

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

6 REPLIES 6
Highlighted
Dual Super User
Dual Super User

Re: Working With Images In Power Apps

Hi @Srinath 

 

You can set up the configuration like:

 

1. Create a variable in flow to retrieve the image content.

This value can be passed from the app through FlowName.Run(JSON(Camera1.Photo, IncludeBinaryData))

2. Use this variable to create an HTML file with the image and save it to OneDrive for Business.

 

3. Use the convert to pdf action in OneDrive for Business and save it as a pdf.

 

4. If you want you can save this converted file and delete the html file.

 

Hope this Helps!

 

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

Highlighted
Community Champion
Community Champion

Re: Working With Images In Power Apps

Shane Young has done a Video on the request:
https://youtu.be/2rfAQe1kK8M?t=129

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Highlighted
Community Support
Community Support

Re: Working With Images In Power Apps

Hi @Srinath ,

Do you want to capture an image from your canvas app to your flow, then embed the image file within a PDF file, and save the image file in your SP Library?

 

Firstly, if you want to capture an image from your canvas app, and pass it to your flow, I think the "Add Picture" control could achieve your needs. You could consider add a "Add Picture" control in your canvas app to upload image file.

I assume that you also need to pass some Html text from your canvas app to your flow to generate PDF file using Power Automate, so you need to add a Html Text control in your app to type your Html text.

 

Within your Power Automate, you need to define two parameters (using "Ask in PowerApps" dynamic content) to receive Picture data and Html text data passed from your canvas app. The flow's configuration should be like below:

6.JPG

 

7.JPG

 

8.JPG

The expressions used in above flow as below:

"Create file" action of SP Connector:

dataUriToBinary(outputs('PictureData'))

"ImageDataUrl" (Compose) action:

dataUri(body('Get_file_content'))

"Initialize variable" action:

concat('<img src="', outputs('ImageDataUrl'),'" /><br>', outputs('HtmlCode'))

 

The app's configuration as below:

9.JPG

The generated PDF file likes below:

10.JPG

 

More details about embedding image file within a PDF file, please check the following blog:

http://johnliu.net/blog/2017/10/generate-any-pdf-documents-from-html-with-flow

 

Please consider take a try with above solution, 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.
Highlighted
Helper II
Helper II

Re: Working With Images In Power Apps

Hi @v-xida-msft ,

 

I am able to generate a PDF for an image and store it in one drive/SharePoint now. But when I open the PDF document, the image doesn't get displayed. I only have a 'X' mark in red at the top of the document.

 

Please find below a screenshot of the same.

 

Kindly let me know how I can overcome this issue.

 

Regards

Srinath

 

Highlighted
Community Support
Community Support

Re: Working With Images In Power Apps

Hi @Srinath , 

Firstly, please check if you have create your flow and app based on above solution I provided above step by step.

 

Within your flow, you need to create a image file in your SP Library firstly based on the passed image data from your canvas app. Within your flow, you need to use the following expression to convert the passed image data uri data into a Binary data:

dataUriToBinary(outputs('PictureData'))

Within your canvas app, you need to use JSON function and Substitute function to convert the attached image into a json string, then pass the json string to your flow:

Substitute(JSON(UploadedImage1.Image, JSONFormat.IncludeBinaryData), """", "")

 

On your side, please check if the stored image file in your SP Library could be opened correctly. If not, I think there is something wrong with your flow's configuration and app's configuration.

When embedding image data within a PDF file, please make sure you have checked the blog I listed above. Within your flow, you need to use concat expression to concatenate the image file content with the passed HTML text into a whole HTML text value.

 

I have attached the sample flow and canvas app, please check the attached file. Please edit it within your Power Automate and Power Apps, refer to them, and configure your own flow and app.

 

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

Highlighted
Helper II
Helper II

Re: Working With Images In Power Apps

Thanks for helping out @v-xida-msft .

 

Regards

Srinath

Helpful resources

Announcements
secondImage

Demo-Extravaganza 2020

Check out these cool Power Apps & vote on your favorite!

secondImage

Robotic Process Automation

Let's talk about the solution provided by Microsoft for Robotic Process Automation (RPA)

secondImage

Community Highlights

Check out whats happening in Power Apps

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

Top Solution Authors
Top Kudoed Authors
Users online (6,075)