How to upload images from the camera control to Azure blob storage

We have seen several customers asking us this question- “Can I upload the photos taken using the Camera control in PowerApps to an Azure blob storage?”. The answer is : “Yes certainly, you can do that using a Custom API in PowerApps”. The immediate next question is : “Do you have an example for such an API?”. This blog post is attempting to provide an answer to that question.

This article explains how to create a Azure API App which takes in a image file, stores it on an Azure blob storage account and returns the URL of the image. This API can then be called from any application including PowerApps.

Run the application by clicking F5. It should open the browser window with the URL http://localhost:<PortNumber>/. Append the string swagger to the end of the URL to make it http://localhost:<PortNumber>/swagger in the browser Address Bar and press Enter.

You should see the swagger UI page. Expand by clicking the UploadImage link and click on the “Post” button. Browse for an image file from your machine. [Optionally] provide a fileName and Click on the “Try it out!” button.

You should see a 200 Response Code with a JSON in the Response Body containing the four properties similar to the screenshot below.

Publish the API to Azure

Create a new Storage account of type Blob Storage or use an existing one and add a Container of type Blob by the name images. Construct your StorageConnectionString by replace the MyStorageAccountName and 1234 with your Storage account name and one of the Access keys.

You should the swagger UI page as earlier. Expand by clicking the UploadImage link and click on the “Post” button. Browse for an image file from your machine. [Optionally] provide a fileName and Click on the “Try it out!” button.

You should see a 200 Response Code with a JSON in the Response Body containing the four properties similar to the screenshot below.

Download the Swagger file for registration with PowerApps

Copy the URL from the Swagger UI (as shown in the image below) and paste it on the address bar of a new browser window.

Save the file locally in your machine by the name “ImageUploadAPI-swagger.json”.

Register the Custom API in PowerApps using the swagger file

Browse to https://web.powerapps.com. Login using your work or school email id. Click on Manage on the left nav and then on Connections.

Then click on New Connection on the top right side.

Click on Custom and then on New custom API.

Give a Name “ImageUpload” for your custom API. This is how you will call your API from PowerApps. Select the Swagger file from your local machine for Swagger API definition. [Optional] Add any API icon file (32X32). [Optional] Provide a description for your API.

Click on Next. Select “No Authentication” as the authentication type and click on Create. It is not recommended to leave your API endpoint as “No Authentication”. We shall test the API first and later I shall point to the steps for securing the API and the custom API endpoint with AAD authentication.

Create a PowerApp with Camera control

Open PowerApps on your Windows 8/10 machine (If you haven’t installed PowerApps yet, you can download PowerApps from https://aka.ms/powerappswin). Sign-in using your work or school email id. Then click on New from the left nav and look for Create an app > Blank app > Tablet layout.

This will open a blank Tablet app with a default screen. Click on Insert > Media > Camera to insert a camera control to the page.

Move the Camera1 control to the center of the screen.

[Optional] If you are using a device with multipe cameras, you may want to have a way to switch between front and back cameras. We shall insert a Toggle Switch an bind it to the Camera control to toggle between front and back cameras.

Click on Insert > Controls > Toggle to insert a Toggle control. Click Insert > Text box to insert a Text box (label) control. Place it next to the camera and change the Text property for the Text box to “Toggle front/back camera”.

With the Camera1 control selected, change the dropdown on the top left to Camera and type the following formula in the Formula bar.

If(Toggle1.Value, 1,0)

Add a Text Input Box for entering the File name. Click Insert > Text > Text input to add a Text input control to the screen.

Move the Text Input below the Camera control. Change the Text property of the Text Input to an empty string “”. Change the HintText property of the Text Input to “File name”.

Click on File > Save and the give a name to your app “CameraUploadApp” to save your app to The cloud.

Use the custom API to upload the image from the Camera control

Add the Data source for the custom API in the PowerApps app. Click on Content > Data Sources > Add data source button from the right pane.

Click on Add connection.

Select the ImageUpload API that you created earlier and click on Connect to add it to the app.

Now we shall use a formula to upload the camera’s image using the api and collect the output file path to a static collection.

Click on the Camera control then click on Action > OnSelect and enter the following formula:

This formula adds passes the current Camera picture and the text from the Text Input box to the API and adds the output FileURL to a new collection with these three columns : URL, Name & Time. It also assigns the same Text Input text to the Name and assigns the current time to the Time column.

Lets now insert a Gallery below to display this new collection.

Click on Insert > Gallery > Select the third item on the first row – Horizontal Image Gallery With Text to add a gallery to the screen.

Position it below the Camera Control and resize it to use the full width of the screen.

With the Gallery1 selected, change the Items property from ImageGallerySample to MyPictures.

Click on the Preview the app icon on the top right OR press F5 to Preview the app.

Enter the name of the image and then click on the Camera to execute the upload. Change the name of the image and click on the Camera again to upload a new image.

You should see the newly uploaded images in the gallery below. Select the Gallery and use the right nav to modify which columns bind to which controls. Select the URL, Name & Time respectively for the Image & and the two text boxes.

You have successfully uploaded the images to the blob storage. You can verify that with Azure Storage Explorer as well.

[Optional but recommended] Secure the API app and the custom API with Azure Active Directory