How to upload files from PowerApps to Azure Blob Storage and display the files in a PowerApps Gallery.

1. Upload Files from PowerApps to SQL
Server
My cheat sheet for upload and display files in PowerApps
Peter Heffner
@Lingualizer
17 April 2019

2. Preliminary
notes
• First: I'm not an Azure Expert at all!
• This presentation is more like a cheat sheet if you have Microsoft Azure SQL Server as a database
and want to store files from within Microsoft PowerApps.
• For a Microsoft PowerApps project I created several tables on an Azure SQL Server.
• Documents and images are stored in an Azure Blob Storage Container
• Prerequisites:
• Azure SQL Server with tables of your choice
• Azure Blob Storage Container
Optional: Microsoft Azure Storage Explorer to understand where your files are uploaded to.
What you will find here
• An example of a very simple table “Projects”. Each project has an
unique ID.
• A blob storage container “projects”. This container will have folders
which are named as the IDs of the project ID. The folders are
created during upload.
• PowerApps with an upload functionality for files
• A Gallery with the uploaded files for each project
• PDF-viewer and image control to display the content

3. Azure SQL
Server Table
Azure Blob
Storage
Don‘t forget to define a key.
If not you won‘t be able to create
new records in PowerApps
This is where we want to store our
project files.
There will be folders underneath.
Folder names = Project.ID

4. Create a
Canvas App
In PowerApps the starting point was
[Create an app] – [Canvas] – [Start with your data]
Here I chose my SQL connector to automatically
build a standard app in Smartphone layout
Also add the
connector to the
Azure Blob Storage

5. Create some
Projects
First I created some projects.
Before we navigate from the
browse screen to the details
screen we store the project ID in a
global variable
Store the
project ID in a
global variable.

6. The
“Add Picture“
Control
On the detail screen we add next to
the Gallery the „Add picture“ control.
This is where we upload the files.

7. Show me the
details
This screen has some additional fields to see more details.
• ti_filename: a text input control which contains the filename of the selected file and the option to
rename it as a default value.
• lbl_ID_file: Concatenate the project ID (our folder name), add a „/“ and the filename
• lbl_blob: this is our file as a blob
All this fields can be hidden in the published app. It is just to show which content we use for the
upload.

8. File Upload
Next we add a button and add
some action to „OnSelect“
The Azue Blob Storage Container

9. Where is the
file?
If you open the Azure Blob Storage Explorer you will see a new folder (our project ID).
This is where we find the file.

10. Show Files
in a Gallery
Items = AzureBlobStorage.ListFolderV2(LookUp(
AzureBlobStorage.ListFolderV2("projects").value,
DisplayName=glb_ProjectID & "/", Id)).value
The command for retrieving the content of a folder is a bit tricky.
At first I expected something like „projects/1“ to look for my
files, but it is all about the Ids within the blob container
„projects“.
Finally I combined all my bits and pieces as one single command
for „Items“.
The screenshot on the right has the PDF viewer control.
If you also have images, add the image control and decide based
on the value of „ThisItem.Media.Type“ which to display.

11. Peter Heffner
@Lingualizer
Thanks for watching!
Thanks to Laura Rogers, Shane Young, Paul O‘Flaherty, and many more
for their inspiring videos and blog posts around Microsoft PowerApps.