The simplest No-Code Solution to Save Picture Files from PowerApps to Flow
/
Today, we are going to talk about a new technique (hack) to send any pictures from PowerApps to Flow.
We will do this with a modified Flow Button trigger.
Update 2019-04 Save Picture Files from PowerApps to Flow via unused Outlook Connector
I’ve came up with an EVEN EASIER hack that you should check out. The 2019 April method is the best one so far.
Update 2019-03 there’s some JSON definition changes to the PowerApps trigger. See note below.
Update 2019-01 - I did a YouTube recording of this blog post
Why John, what is the problem?
Why do you repeatedly write the same post?
The problem is that we want to use PowerApps to collect binary files (mainly images, but also documents, video, anything) and send them to Flow - Flow can then decide where to send the pictures. To SharePoint, to Email, to Cognitive Services etc.
This is a problem that isn't out of box, and has several good workarounds - some choices more difficult (or limited) than others.
What have we got so far?
This is the first method - we can send PowerApps' Camera to Flow via a built in dataUriToBinary() expression. But it doesn't work for Add Picture from device gallery. We also can't use this method for sending files - documents, zip, sound, movie clips.
This method lets us use Add Picture from gallery and we can send any binary file formats. But the input parameter is specialized multipart formdata bytes, so this method needs a Custom Connection (need a Swagger definition file) to work with PowerApps.
What is this new method?
We are going to take a Flow Button and hack it into a PowerApps trigger to send Files from PowerApps to Flow.
It will be magical. Because there will be no Swagger.
1. Build a Button-triggered Flow
We start with a Flow Button trigger - which lets us specify which parameters we want as part of the button click. Flow Button let us select File.
Create FileName and FileContent compose actions to extract the value from the File trigger parameter. Then use SharePoint's create file to create this file.
Test this Flow - upload a picture of LEGO 10234 - success.
2. Examine this Flow Button trigger and switch it to a PowerApps trigger.
Next, we need to check the Flow button trigger and convert it to a PowerApps trigger.
This can be done via Exporting the Flow, open up the export in ZIP file, and change the JSON definition of the trigger.manual.kind from "Button" to "PowerApp". But here I'm using a simpler way by opening the Flow using Flow Studio's Edit Flow JSON capability.
Try it: https://flow-studio.azurewebsites.net/welcome
Save the changed definition and this is now a PowerApp trigger.
Note: Have a look at the JSON schema generated for the Flow Button's file trigger parameter. We'll need to know this later.
3. Build our PowerApp
Note - this is the Add Picture control. Not the camera control.
Because our Flow is now a PowerApps trigger - it appears in the available list without us having to build a Swagger file.
The parameters needed is { file: { name: "x", contentBytes: ... }}
This matches what Flow Button wants for a file upload.
4. That's it. Done.
Run the PowerApps to test.
And the result - LEGO 851400 cup is uploaded to SharePoint via Binary. No Swagger.
Future thoughts
Eventually, I hope we have a way to officially define the input parameters we want to use in a PowerApps trigger. The way it currently works is awkward. It should just use the same way that the Flow Button trigger works.
Until that day - this method is possibly the simplest way to send any binary files from PowerApps to Flow. Because this method doesn't need custom connections - you might find this useful in not hitting your Flow plan limit of 1 custom connection.
Underneath the hood though, a Flow Button trigger is the same as a PowerApps trigger (they are both HTTP Request Triggers).
Download File:
https://github.com/johnnliu/flow/blob/master/FlowNinja-SendFileToFlow_20180728000358.zip
Bonus Exercises:
Create multiple files first in Flow Button before converting to PowerApps trigger.
In the definition, made some (but not all) of the file parameters required
Update: adding additional arguments
The converted PowerApps trigger works, but you may find it troublesome to edit the Flow after it was changed. And attempts to use Ask Parameter in PowerApp Trigger within the Flow Designer will cause the PowerApp trigger to be regenerated, potentially breaking the file argument.
Instead, do this. First make sure it is a Button trigger again.
Then, create multiple arguments with the Flow Button
Note the two new arguments have very boring names text and text_1
Note the two new string arguments in addition to the file JSON record object.
Result:
2019-03 update
When editing the Button trigger to Powerapp do:
Change Button to Powerapp
Rename variables to nicer ones file1 and file2 - rather than file and file_1
fix up references within the Flow to point to triggerBody()?[‘file1’]?[‘name’] and triggerBody()?[‘file1’]?]’contentBytes’]In PowerApps - call Flow method with two files
See result
