App That Uploads Documents to a Url

One of the more common asking nosotros have seen from customers is that they want to use PowerApps and use Azure Blob storage to store their media files. Then 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-u.s.a./web log/custom-api-for-image-upload/ ). Well, no more. With this update, you lot can now straight use the Azure Blog Storage connector from PowerApps to load or save images and other media. Not only that, you lot can share the app with users – and they will be able to utilize your app without you having to share the business relationship keys to y our Hulk store.

Azure Blob Storage Setup

To enable Azure Blob Storage in an app, y'all volition demand to become the following data:

• Azure Storage Account Name
• Azure Storage Account Access Key

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

• Go to https://Portal.Azure.com
• Login with your arrangement e-mail and countersign
• Select Create a Resource on the top left

• Search for Storage Account
• Select Storage business relationship – blob, file, tabular array, queue

• Select the Create button
• Fill up in the details about your new blob then select Create, this will create the blob storage
  • The name of your hulk that you create will be used as the Azure Storage Account Proper name when you setup your connection
• Once the hulk storage is created, y'all will encounter a holding called Admission keys click on that and copy one of the two keys that accept been created for yous

Canvass app setup for Azure Blob Storage

Let me evidence you how to quickly build an app where you lot can display and upload images from/to your Blob store. We volition use two Gallery, the get-go ane to browse a container, and the 2d one that displays the files in the selected container. Finally, nosotros will apply some of the controls to show the user the files in your hulk 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 Hulk Storage connector and fill in the details that you created.

• Add a new blank vertical gallery by going to Insert > Gallery > Blank vertical
  • Alter the layout to a Title gallery by clicking on the gallery and then going to the right property panel and clicking on Layout to change it
  • Prepare the Items holding of the gallery to: AzureBlobStorage.ListRootFolderV2().value
  • This volition show y'all the highest-level containers that are available to store / retrieve your files
  • If you practise not take any items testify, you tin download the Microsoft Azure Storage Explorer (https://azure.microsoft.com/en-u.s./features/storage-explorer/ ) which will permit y'all to login and add containers

• Add another new bare vertical gallery past going to Insert > Gallery > Blank vertical
  • Ready the layout to Image, title, subtitle and torso
  • Set the Items property to: AzureBlobStorage.ListFolderV2(Gallery1.Selected.Id).value
  • Change the following items in the data panel
    • Torso to Path
    • Subtitle to MediaType
    • Title to DisplayName

• Click on the first image in the gallery and fix it to – AzureBlobStorage.GetFileContent(ThisItem.Id) or  "https://YourStorageAccountName.blob.core.windows.net" & ThisItem.Path **
  • You tin use the MediaType to pass the path and URL to whatever type of supported control in PowerApps such equally:
    • PDF Viewer
    • Prototype
    • Audio
    • Video
    • ** Change YourStorageAccountName to your actual store account name if you lot used that option.  This selection is only if you set your hulk storage to public admission.  If your hulk storage container is locked downwardly (which is the default and recommended) and then you can utilize the GetFileContent method.

Upload Files to Blob Storage

Your app can now display files from hulk storage into a gallery, at present let's add together a way for users to upload new files to blob storage.

• Add an upload control to ship a file to your hulk storage by going to Insert > Media > Add Movie
  • Add together a Textbox to your canvas app and then you can proper name the file past 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 volition need to be updated to the directory yous want your files to be uploaded to

Refreshing Galleries Azure Blob Storage

The blob connector does not motorcar refresh when data is updated in it. To solve this, you can add together 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 yous created that contains the high-level folders
  • Set the items to: TopLevelList

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

Using your files in an app

Now that you tin can accept users upload files or utilize the photographic camera / pen and other controls to ship the files to Azure Blob Storage, you volition 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.

Attempt 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("sound/" in Gallery2.Selected.MediaType,AzureBlobStorage.GetFileContent(Gallery2.Selected.Id))

You can also show your user when you exercise not have a control that will play a certain type of certificate. Add a label control prepare the Text to "Document not available in PowerApps" and apply this as the visible belongings:

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

Security for your Azure Blob Storage files

Yous will want to secure your Azure Blob Storage files. Each container tin can have a different Public Admission Level assigned to information technology. In Microsoft Azure Storage Explorer, yous can click on a blob storage container, get to the actions tab on the bottom left of the screen and view your admission settings.

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

If yous are using the GetFileContent similar we did to a higher place for the PDF then everything volition keep to work – AzureBlobStorage.GetFileContent(Gallery2.Selected.Id). If y'all hard coded in your URL with the storage account proper noun, then you lot will demand do to the following:

To secure your files and allow your app to prove them to your users, yous will demand to setup a Shared Admission Signature. This will assign a fundamental to all the files in your container and will not let them to be shown unless a special key is appended to the URL.

In Microsoft Azure Storage Explorer, y'all can click on a blob storage container, go to the actions tab on the lesser 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 fundamental when yous click create that will expire based on the engagement time that you set up in the box. Your key will end working on this appointment.

Copy the Query cord on the side by side folio to utilize it in your app. In your app suspend the query string to the end of any URL in a control where you are viewing an item. Yous can do this in the app directly (not recommended) or store the cardinal in a unlike data source and use that data source to insert into the key.

For example, in the gallery that is showing images dorsum to your users, yous volition need to change the paradigm holding of that image:

• From: "https://YourStorageAccountName.blob.cadre.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 tin can send to an exterior customer, you lot can use the CreateShareLinkByPath function. This will lock downwardly the file to a catamenia you tin 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 beginning record in the gallery showing all your files
• Add together 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 volition show in PowerApps, I utilise the ExpiryTime to set a timeout for the file an case would look similar:
      • Launch(AzureBlobStorage.CreateShareLinkByPath(ThisItem.Path,{ExpiryTime:DateValue("1/1/2050")}).WebUrl)

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

Sharing an app you made that uses this connector

Subsequently your app is fabricated 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 cardinal to admission the blob storage. With the previous version you would have to give each team fellow member your access information to allow them to use it.

Electric current users of the Azure Blob Connector

If you are currently using the Azure Blob Connector in your app information technology will continue to work. As you share your current app with other squad members it will continue to work as information technology did earlier. If you need to update your app that will as well go on to work. Yet, you will non be able to add new Excel data source from your hulk storage.

You can use the post-obit connectors that support Excel equally a connection:

• One Bulldoze
• Box
• DropBox
• Google Drive

Additional Resources

Equally you add Azure Blob Storage to your apps, you can brainstorm to leverage all the ability of the Azure Platform.

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

• Automobile generate thumbnails: https://github.com/Azure-Samples/role-epitome-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 lot, let us know what you recollect.

abramsappich.blogspot.com

Source: https://powerapps.microsoft.com/en-us/blog/upload-files-from-powerapps-using-the-azure-blob-storage-connector/