Power Apps: Upload File to Azure Blob Storage

by | May 3, 2023 | Power Apps, Power Platform

Hi folks, in this quick post I will demonstrate the basic steps to upload file(s) to Azure Blob storage.

Prerequisites

  • An active Microsoft Azure subscription
  • An Azure Blob Storage (Here is a link that shows how to deploy Azure Blob Storage for demonstration purposes)
  • Microsoft account with the Microsoft Power Apps Plan 2 license

 

The Demo

Below you will find the most significant steps to lab this demo. You will create a canvas app where you select a file to upload. You will type a name for the file and press a button to upload it to the Azure Blob Storage container.

You can also add an extra line of code with a Gallery control to display the images stored in the Azure Blob Storage container.

 Add the “Azure Blob Storage” connector

In the left hand side menu, select Data – [In the “Select a data source” textbox, type blob] – select Azure Blob Storage.

After selecting the authentication type “Access Key”, copy and paste from Azure Blob Storage the account name and the access key.

You can get Access keys from the Azure Blob Storage left hand side menu, Security + networking – Access keys

Add controls to the canvas app

For the demo purpose you will need to add the following controls:

  • Add picture (AddMediaButton)
  • Text input
  • Button
  • Gallery

Add function code

The “Code 1” section displays the code that uploads the file to Azure Blob Storage.

Info: The ClearCollect function deletes records from a collection and adds another set of record(s).

Code 1. Set the OnSelect property of the button to:

ClearCollect(colBlobFiles, {Image:AddMediaButton1.Media, ImageName: TextInput2.Text});
AzureBlobStorage.CreateFile("Images",TextInput2.Text,AddMediaButton1.Media);
UpdateContext({Start:true})

 

The “Code 2” section displays code that shows a list of files stored in the blob container.

Code 2. Set the Items property of the Gallery1 to:

AzureBlobStorage.ListRootFolderV2().value

 

How it works

The video below shows how the Canvas app functions.

468
Share This