Working With Images In Power Apps

[Srinath]

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

[yashag2255]

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!

[eka24]

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.

[v-xida-msft]

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:

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:

The generated PDF file likes below:

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,

[Srinath]

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

[v-xida-msft · Accepted solution]

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,

[Srinath]

Thanks for helping out @v-xida-msft .

Regards

Srinath