Sending Image from Canvas PowerApps to SharePoint Document Library using Flows

One of the most common requirements is to upload images to SharePoint using PowerApps. From my learning from various sources, I’ll try to “demystify” my explanation to send/upload an image to SharePoint Document Library using Flows on my Canvas PowerApp.

Ingredients

Assuming you have the following things already  in place in PowerApps as well as in SharePoint

  1. PowerApps’ Camera/Image control and a Submit button. In my case, the image above is a camera so that I capture the image I want and the image below is the Image control to show me what I clicked.
    powerApp
  2. A SharePoint Document Library to record, say, Incidents.
    spDocLibrary
  3. We will get to the Submit button on the PowerApp once we create our Flow.

Flow

Let’s create a Flow to pick the Image from your PowerApp, convert it to binary and send it to the SharePoint Document Folder location called Incidents.

  1. Since we want to trigger the Flow from the PowerApps itself, we will select the trigger of the Flow as ‘From PowerApps’ and hit Create
    createFlow
  2. Once your Flow is ready, leave the first step of PowerApps because that’s the trigger. Add Step to create a SharePoint file and fill in the details of the Document Library you have created.
    createSPFile
  3. Fill in the FileContent as above. You’ll need this to be converted in the intermediate step after this.
  4. Now, you’ll need to add an additional step in between PowerApps and the Create SP File step as below. It will be a Compose action.
    addAction
  5. In Compose action, under Expression, select dataUriToBinary expression and make sure you open the bracket as well.
    dataUriToBinary
    toolTipHidden
  6. Now, go back to the Dynamic Content section and select the CreateFile_FileContent to complete the formula.
    fileContentAvailable
    completedFormula
  7. Click OK on the screenshot above and the formula should be set.
  8. Now, replace the File Content section to take in the Output of the Compose step.
    outputRecorded
  9. Save your Flow and your complete Flow should look like this.
    CompleteFlow
  10. I’m naming my Flow as ‘IncidentFlow’ so that I can identify it.
    incidentFlow

Adding the Flow to Submit button

Going back to the PowerApp, let’s Run this Flow on the selection of the Submit button and pass the image.

  1. Now, select the Submit button, and on the Formula bar, add the Flow you created, I named it IncidentRun. Select the same so that the Formula comes as IncidentRun.Run( for you to pass on the image.
    Now, pass the latest image on the collection i.e. the same image which is being displayed in the image control below.

    runFlowFormula

 

Running the App

I just ran the app on the desktop itself, you could do it from your phone too!
So I clicked on the Camera when I was ready, the image appeared in the image control and I that was what I wanted to upload. So I clicked on Submit button.
hittingSubmit

The flow was successful
FlowSuccessful

And my image was in SharePoint too!
imageUploaded

I know it is a lengthy post but I tried to summarize as much as possible. Make sure you have a way to uniquely name each file or else, the same file will be overridden.

Thank you!

 

Advertisements