Microsoft Azure Blob Storage & ASP .NET Core MVC Web Application with Identity UI

Github repository: https://github.com/aLLUPS/BlobStorageFileUpload-ASP.NETCoreMVC

If you are completely new to ASP .NET Core and Blob Storage, do not worry! The following article explains every step you need to follow to integrate azure blob storage with ASP .NET Core web application.

Azure Blob storage is Microsoft’s cloud storage to store different types of files. It is optimized for storing massive amounts of unstructured data. Anyhow the purpose of the following article is not to explore the amazing features of Azure Blob but to dive directly into how to employ it in your ASP .NET Core project.

In this article, I am going to describe how you can upload multimedia files to Azure blob storage, get the URL of the file uploaded, and store it in an SQL database, and display them on the web application.

The content is organized as follows:

  1. Create ASP .NET Core MVC Web Application (Code First).
  2. Create the Database.
  3. Create Azure Storage Account and containers.
  4. Modify the web app & integrate Blob Storage.
Uploading and displaying the files and their details in the web application (The final product).

1. Creating ASP .NET Core Web Application (Code First)

Here, I am using Visual Studio 2019 to initiate an ASP .NET Core MVC web application (Fig 01).

Fig 01: Create ASP .NET Core MVC Web Application with Individual User Accounts

Create your model classes for the ‘User’ (ApplicationUser.cs) and the ‘User’s Media Files’ (UserMedia.cs) as follows: (Remember the application user must inherit from the Identity User. Then all the attributes relevant to the Identity User also inherit to the application user.)

ApplicationUser.cs
UserMedium.cs

The UserMedium class is used to implement media file objects needed to be stored in the database.

2. Creating the database (Microsoft SQL)

Then it is necessary to update the database context class (ApplicationDbContext.cs) to create new migrations and the database, eventually. You can annotate the primary keys, foreign keys, and attributes’ parameters of the entities within the database context class.

ApplicationDbContext.cs

The ASPNetUsers entity created by the ApplicationUser model has an ‘autogenerated string’ as the Id and the entity ‘UserMedia’ created by the model ‘UserMedium’ has an auto-incrementing integer type Id. The date-time of the files uploaded is automatically inserted into the table.

Having modified the database context class, now you can create migrations. Delete the available migration folder with its content and run the following command in the NuGet PackageManger console.

add-migration BlobUploadWebApp-Migrations

‘BlobUploadWebApp-Migrations’ is the name of the migration file (you can change it as your wish). The above command will create a new set of migration files. Now you can update the database. Before that, you have to take the database connection string to your Microsoft SQL database.

Then update the appsettings.json file as follows

appsettings.json

Now run the following command in the NuGet PackageManger console to update the database and create the tables (Fig 02).

update-database
Fig 02: Users table and UserMedia tables are created by the update-database command

Creating the models, database context, migrations, and configuring the web application is now over.

3. Creating Azure Storage Account and containers.

Azure blob storage allows you to store various types of files for free. Any file type can be stored and downloaded from the Azure blob storage. Besides manual upload and download, the process can be automated via a web interface. For that, we will create Azure Blob storage as follows.

Having signed in to your Azure account browse for Storage accounts (Fig 03).

Fig 03: Search for Storage account

Select a storage account and create a new storage account as follows. I named my account ‘blobwebappstorage’. If you have a ‘resource group’ already, you can use it, else you may create a new resource group too, along with creating the storage account(Fig 04).

Fig 04: Create Storage account

Please keep in mind to check whether the blob access is configured to ‘Hot’ (This will enable a fast upload/download of blob files) (Fig 05)

Fig 05: Final step in creating the Azure storage account

Congratulations! you have created your first Azure storage account. Now create a Blob Container (Fig 07 and Fig 07) and start CRUD operations for blobs. I will create a new blob container named: ‘imagecontainer’.

Fig 06: Create Container Step 01

When creating the blob container make it accessible public at the blob level. The uploaded blob files can be directly displayed on the web in this manner.

Fig 07: Create Blob Container

Woo-ha! Now you have created the Azure blob storage and created a container too. Now you have to get the storage account name, connection string, and access key (Fig 08)as follows: (Look for ‘Access Keys’ in the left-side drawer and select it)

Fig 08: Obtain Blob Storage name, access key, and connection string (you can access these keys at any time and can regenerate them too)

We will again move to the code base and will integrate the newly created blob storage account with the previous web application. You will need the above blob storage

4. Modify Web app & integrate Blob Storage with the Web application

First, we will create the controller class to control the upload, and delete actions of the blob. In the controller, the currently logged-in user’s id is taken by UserManger class of the ‘Identity UI’framework. And here the storage account name, the access key, and the container name should be included. For comprehension, I have directly inserted them in the codebase. Nevertheless, you can store them in a more secure place such as the secrets.js file.

UserMediaController.cs

The ‘file’ is input as a FormFile object in the ‘MediaFileUpload.cshtml’ and send to the ‘BlobUtility’ class by the ‘UserMediaController’ to be uploaded to the blob storage container. Besides the FormFile object, the controller should send the ‘Storage Account Name’, ‘Access key’ and the ‘Name of the Blob Container’ to where the file should be uploaded should be passed to the ‘BlobUtility’ class.

Next, we will create the above-mentioned ‘BlobUtility’ class to implement the upload, download, and delete functions for the blobs. In the following class, the input file (which is now ‘FormFile object’) is uploaded to the blob storage. Anyhow, there, it is impossible to upload FormFile objects to the blob storage. To upload the file, now it has to be converted to a Stream object. This conversion is achieved in the code snippet at lines 28–31. And in line 32, the converted Stream object is uploaded to the Azure blob storage. Then the particular upload method:

public async Task<CloudBlockBlob> UploadBlobAsync(string BlobName, string ContainerName, IFormFile file){
}

returns a ‘CloudBlockBlob’ object to the controller which contains the information of the uploaded file (such as file name, URL, etc).

BlobUtility.cs

In order to use the methods and classes employed in the above code, you have to install the NuGet package: ‘WindowsAzure.Storage’.

Now we are left with implementing the interfaces to upload the ‘file’ and display the files from the Blob storage along with its information in the views.

Create the following cshtml view.

Now you can upload files to the containers in your Azure storage account. Store their URLs in the database and display them in the views.

Further, you can observe how the data of the MediaFile object is saved in the database:

Fig 09: ‘UserMedia’ table which stores the media file information and URL.
Fig 10: The uploaded image files are added as Blobs to the Azure blob storage

Conclusion

Azure Blob storage is one of the best solutions for cloud storage. You can upload various types of files to Azure blob storage and retrieve and display them in an ASP .NET Core web application. The files are input as FormFile objects and Stored in the Azure blob storage containers as ‘Steam’ objects. Their URLs, date-time uploaded in the database. The content in the Azure storage is displayed in the web application.

👨🏻‍🎓 A dedicated and enthusiastic IT undergraduate, with the sole goal of sharing ✍🏻 valuable information related to the IT industry 👨‍💻

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store