In this post, we’re going to learn how to transfer images and signatures from Power Apps to the Microsoft Power Automate platform. This is a bit difficult to do because Power Apps does not have a default way to edit and upload images to SharePoint.
The example we will work on is an expense app that I’ve used before. Basically, this is a gallery that attaches to a SharePoint list.
And if I select anything in this gallery, it basically updates this form on the right hand side.
I can then go in this form on the right and edit it.
We’ll go to our SharePoint list and add an image column called Signature.
Let’s go to Power Apps and add that image column into this form. So we’ll click Edit fields then Add field, and select Signature from the dropdown field.
You’ll notice that we are able to add it, but we can’t do things like upload images. If we click on Edit, for example, we can edit everything but update the signature’s image. If we’re doing this on an iPad, it would be nice if we could actually use the screen to type in or to write in a signature before we submit this record, but unfortunately we’re not allowed to do that.
Uploading Images And Creating Signatures
Power Apps does not have a functionality for it, but Power Automate can come to the rescue and help us out. So here’s how we can do that.
First, we need a way for a user to actually submit an image and draw a signature. If we click the + sign, it adds a new expense report, and if we click the check mark, we get this popup box.
If we go back, nothing happens. But if we click Submit, the expense report goes through. We’re going to add in an ability for a user to upload an image and to draw a signature. So let’s go to Media and then go to Add picture. This control allows us to basically add photos.
And then click on Input then Pen input. This allows us to draw our signature.
Let’s make this model a bit bigger so we have more space to do this.
And then we’ll add some labels below just to show everyone what we’re doing.
On the left, the label will say Upload receipts and on the right hand side, it will be Please sign.
Creating A Microsoft Power Automate Platform Flow
The next thing we need to do is to create a Power Automate flow that basically takes the upload receipt control and signature control and uploads them to our SharePoint expense, receipts, and signatures document library. Again, there is no way to do this in Power Apps directly and we’ll have to use Power Automate.
Let’s click on New flow and select Instant cloud flow.
We’ll select Power Apps as the way to trigger this flow, call this UploadStuff, and click Create.
We’ll go to our SharePoint connector and select Create file.
We need a site address and a folder path, which in this case is called /expensereceiptsandsignature.
For the name of the file, we probably want the name of the expense receipt and the signature to be identical to the name of the actual title of the expense receipt. We will ask Power Apps for the File Name and File Content.
We’ll then click New step and then do the same thing again, because we need one Create file for the actual expense receipt photo, and another one for the signature that’s going to be uploaded. Only the File Content will be different, which we need to ask for within Power Apps.
We have now finally created our workflow.
Connecting Power Apps To The Microsoft Power Automate Platform
The last thing we need to do is to connect Power Apps to Power Automate. So if we add a new expense and select the check mark, we get this model again.
If we click the submit button, all this model does is to submit the form and set the visibility back to false.
We have to go back to the main screen and activate this flow. But first, we’ll copy what’s on the fx bar and cut it just so it’s saved in our clipboard. Then we’ll go to Action, click on Power Automate, and then select UploadStuff, which is again, the Power Automate workflow we had just created. This will then import the workflow into our Power Apps.
Defining Arguments In Microsoft Power Automate Platform
We need to define a bunch of arguments that we’ve specified within Power Automate. The first argument that we need to specify is the actual file name that we want to call it, which in our case will be equal to the title of the expense report that we’re submitting, which is stored in DataCardValue1.
We also need the actual image of the receipt that we’re uploading and paste all of the other commands that we had before.
Now this is where things get tricky and by tricky, I unfortunately mean very tricky. If we submit this, what should happen is that the UploadedImage1.Image and Pen.Input2.Image should pass through the workflow and they will the file content that would be created.
However, note that UploadedImage1.Image doesn’t actually refer to the image itself. It refers to a path that Microsoft has made for it to know where to upload the image. So it’s not really the actual image code itself; it’s a random path that only Microsoft has access to. The image will be saved, but it’ll be some random text file that you won’t be able to understand.
So we need to make a few adjustments using this code:
Creating A Variable For Each Image
The first thing we need to do is to create a variable for each image. We’ll create a variable called varImage1 which will be equal to the JSON representation of the uploaded image. We also want to include the binary data in the JSON.
We’ll then take the output of this function which is stored into varImage1 and create another variable called varImageTrimmed, which basically takes the varImage1 and chops off the ends of it using the Mid function.
We’re taking the uploaded image and converting it into a URI – a piece of code that’s stored in text form that represents what the image actually is. We’re then taking that and stripping out the first two characters and the last two characters of that text, because those are format identifiers that we don’t need.
Then, we’ll do the same process for the signature and replace the image with PenInput2 and call it varSig1.
Converting URI Code To Binary Code
We already said that Power Automate is not a random pathway to an image; instead, it is the URI code of the image itself, which is basically the textual representation of that image. We can’t just pass that textual image so we need to convert the code that we receive into binary code that SharePoint can read.
All the files are in binary code, so we need to go to Expression and use a function that converts URI to binary. We’ll put this expression into the file content element of this action and then click on Save.
The one thing we have left to do is to make sure that the files are not named the same thing. We want the first file to be the image, and the second file to be the signature. So we can edit the first one with _receipt.jpg and the second one with _signature.jpg.
Let’s try it out to see if it works. We’ll start off with a new expense report for a new iPad costing $400.
Once we click the check mark, we can add the picture and the signature.
We can upload our receipt and add our signature.
We can then click on Submit. To confirm, let’s go to our Expense Submission SharePoint list to see if that line item has been created.
In addition to that, if we go to Expense Receipts and Signatures, we see the new iPad receipt and new iPad signature, both of which correspond to the title of the expense report we have just created.
These are real images and we can actually see them whereas if we’re to do it the old fashioned way, these would just be text files instead.
***** Related Links *****
Microsoft Power Automate: Workflow Automation
Automated Flow In Microsoft Power Automate
PowerApps Integration In Microsoft Power Automate
Conclusion
Think for a moment how powerful this is. We now have a way to create an application for people to take photos and signatures, and put them into a Microsoft Power Automate platform workflow. In this case, we’re using them to store files in document libraries. The key thing that we learned today is how to move data related to images and signatures from Power Apps to Power Automate.
If you enjoyed the content covered in this particular tutorial, please don’t forget to subscribe to the Enterprise DNA TV channel. We have a huge amount of content coming out all the time from myself and a range of content creators – all dedicated to improving the way that you use Power BI and the Power Platform.
Henry
