How to upload any file to Azure Blob storage service?

Microsoft Azure offers different types of storage like blob (binary large object), files, tables (key/value based), queues. In this post, I’ll tell you how to upload any file to Azure Blog storage service.

An application may need to upload any file like images, video, etc. Azure’s blob storage is the right storage solution that should be used for this purpose. The main focus of this post is blob storage and the front-end framework can be of your choice like ASP.NET MVC, Angular 2, AngularJS or some other framework.

Application

The project code used in this post is located on GitHub, so feel free to use it for learning purpose. I’ll be using ASP.NET MVC framework for this post. If you are using something else, even then this post can help you to learn about Azure’s blob storage. This application allows a user to upload an image as blob and show it back to the user. Similarly, any type of file can be saved using the same concept.

Azure’s Storage Account

To work with blob storage, an Azure account is required which is free for 30 days. If you already have an storage account, then you are good to follow next steps in the post. If not, please create this account by using the azure portal by going through New > Storage > Storage account - blob, file, table, queue. Fill up all the required information in the setup blade and click create which will just take few seconds to create an account.

Container

To use Azure’s blob storage service to upload any file as blob, we need to create what is called as a Container. Think about container as a folder that will store blob(s). A container cannot be nested inside another container like folders in file-system. To create a container, go to the storage account in portal, click Blob service and plus icon for container. A container needs to have a name (all lower-case) and an access type. The access type is the protection level:

  • Private (hidden from anonymous user)
  • Blob (to show blob to anonymous user)
  • Container (to show all the blobs in container to anonymous user)

Uploading a blob from portal UI is quite easy. Click on the container and then click on upload that opens another blade to select a file from the file-system. The blob type can also be set as per the requirement:

  • Block (like files on file-system, example: image, xml, movie files, etc. This is optimised for streaming)
  • Page (used to store VHD files for virtual machines, optimised for reading, writing in the middle of the blob)
  • Append (optimised to update the blob at the end, used for logging)

Next, create a container named images and set the access type to Blob.

Access Azure Blob Service from front-end application

As such I’m using ASP.NET MVC for front-end, like most of the Azure services, to consume this blob service we need a client package from Nuget Package Manager in the project named as WindowsAzure.Storage and the package version that is used for this post is 8.2.0. The client allows to connect to all types of storages in Azure like blob, table, file and queues. For blob storage, we will be using CloudBlobClient class.

Image Storage Service

Next, I’ve created a class named ImageStorageService that encapsulates usage of CloudBlobClient class instance. The controller of my application doesn’t need to use the client directly.

Let’s look at the implementation of this service:

Azure blob service can be accessed via an endpoint (HTTP request) and the reading, writing a blob to the container needs authentication key. Both of these information can be copied from the container and storage account’s access key respectively.

The service is quite easy as it uses the CloudBlobClient class instance to upload the image stream. The method named GetBlockBlobReference basically tries to get a reference to a blob by a new id, so as such this blob doesn’t exist, a new blob is created. Next, the stream is then uploaded and the newly generate id is then given back to the controller in order to show the image.

To show the image to anonymous user, the access type of the container was set to Blob and method named GetResourceUri is used to get exact Uri of image resource combining the service endpoint, container name and image resource reference.

Controller

Just for information, I’ll write the controller code below that takes care of uploading the image via custom image service and then showing the image to the user:

Use this link to access the source code of this application. I hope this post easily explains how to upload any file to Azure Blob storage service. For any issues, please use my repository or comment here. Please subscribe to my website to get more update for similar posts.

Siddharth Pandey

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.

You may also like...

Advertisment ad adsense adlogger