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

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

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 III
Dual Super User III

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
Super User III
Super User III

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

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

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

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

Thanks for helping out @v-xida-msft .

 

Regards

Srinath

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (12,074)