normalian blog

Let's talk about Microsoft Azure, ASP.NET and Java!

Upload Camera images into Azure Blob Storage by PowerApps

As you know, PowerApps offers a bunch of useful features to build up powerful applications easily. It's also possible to retrieve Microsoft Azure Platform not only Power Platform. You can acquire knowledge how upload images token by Camera into Azure Blob Storage. Here are steps to build up it.

  1. Azure Storage setup on Azure Portal
  2. Create Connection for Azure Storage on PowerApps Studio for Web
  3. Create apps by using the Connection on PowerApps Studio for Web

Azure Storage setup on Azure Portal

At first, open Azure Portal. Create Azure Storage account or choose existing one to utilize for PowerApps. Create new container to store images from PowerApps like below. The new container name is "images" in this example.
f:id:waritohutsu:20200315071807p:plain

Pick up and save "Storage account name" and "Key1" into notepad to make "Connection" on PowerApps.
f:id:waritohutsu:20200315071903p:plain

Create new Connection for Azure Storage on PowerApps Studio for Web

Next, open PowerApps Studio for Web. Choose "Connection" from left menus. You need to create new connection for Azure Storage at first.
f:id:waritohutsu:20200315072200p:plain

You will find listed connections which someone has already created like below. Choose "New connection" to create newly your Azure Storage connection.
f:id:waritohutsu:20200315072327p:plain

Find "Azure Blob Storage" by using search box like below and click "+" button.
f:id:waritohutsu:20200315072450p:plain

Put "Storage account name" and "key" into inputboxes to complete this steps.
f:id:waritohutsu:20200315072558p:plain

This isn't mandatory, but I also recommend to change your connection name to find easily in later. Find you connection by sorting with "Modifed" like below.
f:id:waritohutsu:20200315072728p:plain

You can change your connection name like here.
f:id:waritohutsu:20200315072808p:plain
Now, you have completed to make new connection for Azure Blob Storage.

Create apps by using the Connection on PowerApps Studio for Web

Open PowerApps Studio for Web and choose to create Blank new app as first. Insert "Camera" control by choosing "Insert -> Media -> Camera" like below.
f:id:waritohutsu:20200315073135p:plain

Insert new button into your app. You will find two controls as "Camera1" and "Button1" like below.
f:id:waritohutsu:20200315073401p:plain

Next, add your connection for Azure Blob Storage. Choose an icon from left side and find your connection by following step an image below.
f:id:waritohutsu:20200315074037p:plain

Put formulas into "OnSelect" action on Button control by following an image below.
f:id:waritohutsu:20200315074500p:plain

Set( imagename, "driverface" & GUID() & ".png");
AzureBlobStorage.CreateFile("images", imagename, Camera1.Photo);

Run your PowerApps

Run your application and click button, so you can find images on Azure Portal like below.
f:id:waritohutsu:20200315074725p:plain