How to Upload Camera Pictures to Microsoft SharePoint with PowerApps and Microsoft Flow

CHALLENGE: Getting Pictures into SharePoint from your phone

In a previous post we dove into some of the use cases for how PowerApps mobile apps can help teams across your enterprise from HR, Sales & Marketing, Manufacturing, Operations, Finance, etc. In this post we are going to show you just how simple it is to build a PowerApp!

Let’s say you want to build a PowerApps-based mobile application which can upload camera pictures directly into SharePoint.

Seems a pretty reasonable, natural expectation given SharePoint has picture libraries and PowerApps has a Camera control, right?

THINK AGAIN!

REALITY: Sorry you can’t do that with PowerApps Alone!

Uploading pictures from a camera directly into SharePoint (even its native Picture Library) appears to be the last thing on the minds of the PowerApps Gods.

• PowerApps does natively (not “custom”) utilize OneDrive as a repository for images & “list” data stored in an Excel file (seemingly a huge step backwards, but actually quite savvy);
• PowerApps does natively utilize DropBox as a repository for images & “list” data stored in an Excel file (same approach as above);
• PowerApps doesn’t natively utilize SharePoint as a repository for images & list-hosted metadata (not a Simple List, not a Document Library, not even a Picture Library).

However, recently myself and others have explored the ever-increasing features of PowerApps and Microsoft Flow, and now a quite-acceptable (even clever) solution has emerged!

SOLUTION: PowerApps + Microsoft Flow

We have uncovered a PowerApps and Microsoft Flow solution which:

1. CAPTURES image content (as Base64Encoded text);
2. CALLS a custom Microsoft Flow (comprised of only 2 built-in Actions) which:
   1. RECEIVES 2 parameters from the PowerApps app:
      1. A variable strImageFileName which will be the filename for the JPG image; and
      2. A variable _imgCapturedImage which is a Base64-Encoded block of text which represents the “raw” image captured by the smartphone’s camera;
   2. TRANSFORMS the “URI” encoding into BINARY (read “image”) using the first built-in “Compose” Action which executes a built-in Data API function “dataUriToBinary()“;
   3. UPLOADS this binary content into a Microsoft SharePoint Picture Library using the second built-in “File Create” Action which accepts 4 inputs and uploads a file.

It’s that easy.

Put another way, you’re triggering a popular FileCreate Microsoft Flow from a PowerApps button click, but transforming the “image” data coming out of PowerApps before it actually populates the “File_Content” field in the FileCreate Flow.

Time to look at the “recipe”” for this PowerApps Cookbook entry:

RECIPE:

CREATE a new SharePoint Picture Library in your o365 environment; in my demo, I’ll name this CAMERA_PICTURES; use only the default fields (you can customize this later)

CREATE a new PowerApps apps using the “blank” app template and “phone” layout (we’re keeping this recipe to its bare essentials)

INSERT the following key elements onto the main screen:

• Camera Control; camCamera
• Button: btnCapture
• Button: btnUpload
• Image: imgCapturedImage

WIRE-UP the Camera Control to “Set” (populate) an internal variable “_CapturedImage”;

WIRE-UP the Image Control to get its “Default” value from this internal variable “CapturedImage” (this is how PowerApps work)

TEST this “binding” functionality so far, and troubleshoot until you get it working:

ADD another “Set()” function to the btnCapture’s OnSelect event handling; this will set a new internal variable “_txtImageFilename” with a nicely-formatted filename based on the current time (handy):

TEST & DEBUG until this functionality is working:

(note: if you see an unusual amount of “SAVE-AS” being done, it’s because I’ve learned several hard lessons losing vast amounts of coding while developing PowerApps. This has become a best practice for me that I heartily recommend!)

SELECT the btnUpload button, then SELECT Action > Flow > Create a New Flow to begin creating a new Flow (follow numbers in screenshot):

Microsoft Flow Designer automatically launches in a new browser tab (handy!):

CLICK “New Step”

ADD a New Step > Add an Action > SharePoint > Create File. It should look like this:

MANUALLY SET the URl to the Microsoft SharePoint site:

MANUALLY SET the Picture Library:

DEFINE 2 new Microsoft Flow “parameters”; ie “dynamic content” that will actually come from PowerApps when it calls this Flow (like it would any other method).

NOTE: if we simply uploaded the incoming “File_Content” parameter contents from the image field in PowerApps at this point, it would be in Base64-Encoded characters, which is NOT the native format for a JPG image, so it wouldn’t actually render in the browser.

INSTEAD we’re going to insert ANOTHER step above this one – a step which does take this incoming Base64-Encoded or “URI”-formatted characters, and CONVERTS it to true JPG “binary” content which CAN be rendered by a browser!

NEXT let’s go find the built-in Microsoft Flow API method which will take our PowerApps-provided Based64-encoded image content, and convert it to “binary” output as “Output”:

THIS is the “magic spell” we’ve all been seeking for leveraging the already-available Microsoft Flow “SharePoint>Create File” and enabling upload of render-able image content!

CRITICAL! You must type a set of parentheses “()” after the select function name, in order to get the method call to appear in the f(x( text box so you can edit it (to add the PowerApps-provided parameter as an argument):

CLICK on “Add Dynamic Content” to select the PowerApps-provided “File_Content” as the input to this conversion “Compose” Action:

INSERT the cursor inside the newly-added parentheses:

CLICK the ‘Dynamic Content” link next to Expressions:

• A list of all the current incoming parameters (provided by PowerApps as it “calls” this Microsoft Flow) is displayed

SELECT the “CreateFile_FileContent” parameter; this contains the Base64-encoded characters of the image content.

RE-OPEN the original CreateFile Action

DELETE the original “CreateFile_FileContent” from the last field:

INSERT the cursor in the last field:

CLICK the Compose > Select More link:

• A list of all dynamic content for the Compose Action is displayed

SELECT “Compose > Output” (that is, the transformed Base64-encoded image to Binary-encoded image) as the dynamic content to populate the FileContent field.

CONFIRM that the CreateFile Action now has the following

1. MANUALLY-set SiteAddress (URL);
2. MANUALLY-set FolderPath;
3. DYNAMICALLY-set FileName (passed as a parameter from the PowerApps app calling this Flow); and
4. DYNAMICALLY-set FileContent (passed as the “Output” from the Compose Action which accepted the Base64-encoded image content passed as a parameter from the PowerApps app to the Flow.

RENAME the Microsoft Flow to be self-describing “ConvertAndUploadImageToCamera_Pictures”

SAVE the Microsoft Flow:

WIRE the PowerApps app’s Upload button to Action > Flow > ConvertAndUploadImageToCamera_Pictures

POPULATE the Flow (“method”) call’s arguments using the internal variables _txtImageFilename and _CapturedImage.

(note: these outgoing values become the incoming parameters FileCreate_FileName and FileCreate_FileContent that the custom Microsoft Flow receives.)

SAVE the PowerApps app

TEST the entire solution

SUCCESS!

Now running the PowerApps will perform the following:

1. PowerApps app captures the raw camera image as Base64-encoded content;
2. PowerApps app captures a dynamically-composed ImageFileName;
3. PowerApps app calls the 2-Stage custom Microsoft Flow with the above 2 parameters and the Flow:
   • CONVERTS (“Composes”) the incoming Based64-encoded image content into Binary-encoded content; then
   • EXECUTES the SharePoint>CreateFile Action using the ImagesFileName (text) and ImageContent (now Binary-encoded).

The FIRST TIME you try this it’ll take you 20 minutes (there are several key PowerApps concepts involved here).

The SECOND TIME you try this it’ll take 10 minutes (but you’ll have grasped the concepts).

AFTER THAT it’ll take you 5 minutes – and you’ll be customizing it from there!

This app has boundless use cases from insurance, construction, utilities, whenever you need to pull pictures from the field on your mobile devices into your Microsoft SharePoint services driven repository. How could this moble app benefit your organization? Drop me a comment below.

Stay tuned for our next post where we will build on this app to access the GPS Location in our phone and add it to our pictures!