Upload files from PowerApps using the Azure Blob Storage connector

 

One of the more common request we have seen from customers is that they want to use PowerApps and use Azure Blob storage to store their media files. So far, this has not been possible out of the box – and customers have had to use workaround using a custom API (https://powerapps.microsoft.com/en-us/blog/custom-api-for-image-upload/ ). Well, no more. With this update, you can now directly use the Azure Blog Storage connector from PowerApps to load or save images and other media. Not only that, you can share the app with users – and they will be able to use your app without you having to share the account keys to y our Blob store.

 

Azure Blob Storage Setup

To enable Azure Blob Storage in an app, you will need to get the following information:

• Azure Storage Account Name
• Azure Storage Account Access Key

If your organization has not signed up for Azure Blob Storage, you can follow these steps to sign up:

• Go to http://Portal.Azure.com
• Login with your organization email and password
• Select Create a Resource on the top left

• Search for Storage Account
• Select Storage account – blob, file, table, queue

• Select the Create button
• Fill in the details about your new blob then select Create, this will create the blob storage
  • The name of your blob that you create will be used as the Azure Storage Account Name when you setup your connection
• Once the blob storage is created, you will see a property called Access keys click on that and copy one of the two keys that have been created for you

 

Canvas app setup for Azure Blob Storage

Let me show you how to quickly build an app where you can display and upload images from/to your Blob store. We will use two Gallery, the first one to browse a container, and the second one that displays the files in the selected container. Finally, we will use some of the controls to show the user the files in your blob storage.

 

Follow  these steps to use the Azure Blob Storage connector in your app:

• Create a new app
• Add the Azure Blob connector to your app by going to View > Data Sources > Add a Data Source > New Connection > Azure Blob Storage
• Select the Azure Blob Storage connector and fill in the details that you created.

• Add a new blank vertical gallery by going to Insert > Gallery > Blank vertical
  • Change the layout to a Title gallery by clicking on the gallery then going to the right property panel and clicking on Layout to change it
  • Set the Items property of the gallery to: AzureBlobStorage.ListRootFolderV2().value
  • This will show you the highest-level containers that are available to store / retrieve your files
  • If you do not have any items show, you can download the Microsoft Azure Storage Explorer (https://azure.microsoft.com/en-us/features/storage-explorer/ ) which will allow you to login and add containers

 

• Add another new blank vertical gallery by going to Insert > Gallery > Blank vertical
  • Set the layout to Image, title, subtitle and body
  • Set the Images property to: AzureBlobStorage.ListFolderV2(Gallery1.Selected.Id).value
  • Change the following items in the data panel
    • Body to Path
    • Subtitle to MediaType
    • Title to DisplayName

               

• Click on the first image in the gallery and set it to - AzureBlobStorage.GetFileContent(Gallery2.Selected.Id)) or  "https://YourStorageAccountName.blob.core.windows.net" & ThisItem.Path **
  • You can use the MediaType to pass the path and URL to any type of supported control in PowerApps such as:
    • PDF Viewer
    • Image
    • Audio
    • Video
    • ** Change YourStorageAccountName to your actual store account name if you used that option.  This option is only if you set your blob storage to public access.  If your blob storage container is locked down (which is the default and recommended) then you can use the GetFileContent method.

 

Upload Files to Blob Storage

Your app can now display files from blob storage into a gallery, now let’s add a way for users to upload new files to blob storage.

• Add an upload control to send a file to your blob storage by going to Insert > Media > Add Picture
  • Add a Textbox to your canvas app so you can name the file by going to Insert > Text > Text Input
  • Add a button to your app for the user to click on it to upload the file by going to Insert > Button
    • For the OnSelect property of the button add : AzureBlobStorage.CreateFile("myfiles",TextInput1.Text,UploadedImage1.Image)
    • myfiles will need to be updated to the directory you want your files to be uploaded to

 

 

Refreshing Galleries Azure Blob Storage

The blob connector does not auto refresh when data is updated in it. To solve this, you can add the following:

• To the button OnSelect property add:
  • ;ClearCollect(TopLevelList, AzureBlobStorage.ListRootFolderV2().value)
• To the screen OnVisible add:
  • ClearCollect(TopLevelList, AzureBlobStorage.ListRootFolderV2().value)
• Update the first gallery you created that contains the high-level folders
  • Set the items to: TopLevelList

 

You can now try out your blob storage app by playing the app, uploading a file, put a full name (with the extension) in the text box and clicking on the button. Do not forget to change the popup window filter to All Files (button right) when it pops up (if you are trying this out from a browser).

 

 

 

Using your files in an app

Now that you can have users upload files or use the camera / pen and other controls to send the files to Azure Blob Storage, you will want to show those files back to users.

You can check the Media type or file extension to show or hide several types of controls on your canvas.

Try using these based on the example:

PDF Document Property:

If(".pdf" in Gallery2.Selected.Path, AzureBlobStorage.GetFileContent(Gallery2.Selected.Id))

Image Property:

If("image/" in Gallery2.Selected.MediaType,AzureBlobStorage.GetFileContent(Gallery2.Selected.Id))

Video Media Property:

If("video/" in Gallery2.Selected.MediaType,AzureBlobStorage.GetFileContent(Gallery2.Selected.Id))

Audio Media Property:

If("audio/" in Gallery2.Selected.MediaType,AzureBlobStorage.GetFileContent(Gallery2.Selected.Id))

 

You can also show your user when you do not have a control that will play a certain type of document. Add a label control set the Text to “Document not available in PowerApps” and use this as the visible property:

If("video/" in Gallery2.Selected.MediaType || "image/" in Gallery2.Selected.MediaType || "audio/" in Gallery2.Selected.MediaType || ".pdf" in Gallery2.Selected.Path,false,true)

 

 

 

Security for your Azure Blob Storage files

You will want to secure your Azure Blob Storage files. Each container can have a different Public Access Level assigned to it. In Microsoft Azure Storage Explorer, you can click on a blob storage container, go to the actions tab on the bottom left of the screen and view your access settings.

The first setting (no public access) will restrict access from viewing / downloading the file even if the user has the URL to that file. If you want to lock down your files online, this is the setting you need to select. If you select that option and click Apply, you will notice your app may stop showing you any images.

 

If you are using the GetFileContent like we did above for the PDF then everything will continue to work - AzureBlobStorage.GetFileContent(Gallery2.Selected.Id). If you hard coded in your URL with the storage account name, then you will need do to the following:

 

To secure your files and allow your app to show them to your users, you will need to setup a Shared Access Signature. This will assign a key to all the files in your container and will not allow them to be shown unless a special key is appended to the URL.

 

In Microsoft Azure Storage Explorer, you can click on a blob storage container, go to the actions tab on the bottom left of the screen and navigate to Get Shared Access Signature.

Set the expiry time to a date in the future. This will create a key when you click create that will expire based on the date time that you set in the box. Your key will stop working on this date.

Copy the Query string on the next page to use it in your app. In your app append the query string to the end of any URL in a control where you are viewing an item. You can do this in the app directly (not recommended) or store the key in a different data source and use that data source to insert into the key.

For example, in the gallery that is showing images back to your users, you will need to change the image property of that image:

• From: “https://YourStorageAccountName.blob.core.windows.net" & ThisItem.Path
• To: “https://YourStorageAccountName.blob.core.windows.net" & ThisItem.Path & “?st=YourKey”

If you need to lock down your files and have a URL you can send to an outside customer, you can use the CreateShareLinkByPath function. This will lock down the file to a period you can set and generate a URL for that file that can be used by users outside of your app.

To try out the CreateShareLinkByPath function do the following:

• Click on the first record in the gallery showing all your files
• Add a button to the gallery (if you did this correctly, you will see one button per record)
• OnSelect of the button add the following:
  • Launch(AzureBlobStorage.CreateShareLinkByPath(ThisItem.Path).WebUrl)
    • Optional items after the path will show in PowerApps, I use the ExpiryTime to set a timeout for the file an example would look like:
      • Launch(AzureBlobStorage.CreateShareLinkByPath(ThisItem.Path,{ExpiryTime:DateValue("1/1/2050")}).WebUrl)

You can now create or update your apps to include Azure Blob Storage files. You can lock down the files if you would like to and show your users the supported files back in PowerApps.

 

 

Sharing an app you made that uses this connector

After your app is made you will want to share that with your team. The wonderful thing with this connector is when you share the app, your team will get access to use the connector automatically and will not have to bring their own key to access the blob storage. With the previous version you would have to give each team member your access information to allow them to use it.

 

 

 

Current users of the Azure Blob Connector

If you are currently using the Azure Blob Connector in your app it will continue to work. As you share your current app with other team members it will continue to work as it did before. If you need to update your app that will also continue to work. However, you will not be able to add new Excel data source from your blob storage.

You can use the following connectors that support Excel as a connection:

• One Drive
• Box
• DropBox
• Google Drive

 

 

Additional Resources

As you add Azure Blob Storage to your apps, you can begin to leverage all the power of the Azure Platform.

For our developer friends, here are a few examples of additional resources that might be helpful:

• Auto generate thumbnails: https://github.com/Azure-Samples/function-image-upload-resize
• Azure Functions with blog storage: https://docs.microsoft.com/en-us/azure/azure-functions/functions-bindings-storage-blob

 

We are excited to release this functionality to you, let us know what you think.