Azure Storage Explorer using ASP.NET MVC

Azure Storage Explorer - Explore Uploaded Files
Share this

In this article, I will build an Azure Storage Explorer using ASP.NET MVC.

Using this sample application, you can view perform the following actions:-

(1) View files in Azure Blob Storage

(2) Upload files to Azure Blob Storage

(3) Download files from Azure Blob Storage

(4) Delete files from Azure Blob Storage

Azure Blob Storage Private Container is used. SAS token has been generated an used to access the files from the private blob container. I am using a static SAS token. You can refer my previous article on how to generate SAS token from Azure Portal. However, a dynamic SAS token generated from code can also be used to have more control.

In this application, I am using PDF files.

External/Third Party Libraries usedGrid.MVC

Source Code : Complete source code for the application can be found on GitHub repo :

https://github.com/sudipta-chaudhari/AzureStorageExplorer_ASPNET_MVC

Application Screenshots : Explore files screen looks as follows from where all the uploaded files are displayed in the grid.

Azure Storage Explorer - Explore Uploaded Files

Upload file(s) screen looks as follows from where you can upload files.

Azure Storage Explorer - Upload Files

Let’s proceed to code.

Step (1) : Create Private Azure Blob Container and Container SAS Token

Please visit my previous article for help on creating private storage container and container SAS token.

Add the following keys to web.config file.

<storage account name>     – replace with you storage account’s name.

<storage container name>  – replace with your storage container’s name.

<container sas token>         – replace with your container’ sas token.

For uploading large sized files, add the following key setting in the web.config file under

<configuration> -> <system.webServer> -> <security> as follows:-

Step (2) : Create Partial View and reference it in shared view

Create a partial view named _LayoutPartial.cshtml as shown follows:

This partial view contains two links to navigate to the Upload and Explore views.

This partial view is referenced in the shared view _layout.cshtml as shown follows:

Step (3) : Create MVC Model class

Create a model class with code as follows. This will be used as the model to bind the grid on ‘Explore Uploaded Files’ view and also for the ‘Upload Files’ view.

Name, LastModified and Size properties are used to bind the Explore Uploaded Files grid.

SizeString getter property reads the Size property and converts the file size to byte, kilobyte, mega byte, giga byte and tera byte.

HttpPostedFileBase[] is used to upload multiple files.

Step (4) : Create MVC ExploreController class

Explore controller’s code is as follows.

ExploreController exposes tow action methods named Index() and Delete().

Index() action method uses DisplayBlobFiles() method to pass the list of blob files from controller to be displayed on the view page.

DisplayBlobFiles() method returns List<AzureBlob> by reading all blobs from the Azure Blob Container.

Delete() action method accepts a string parameter filename and used DeleteFileFromBlob() method to delete a particular file from Azure Blob Container.

Step (5) : Create Explore view

Create the Explore Razor view named Index.cshtml as shown follows:-

As you can see in the first line of above Razor view code, model class used is AzureBlob.cs which was created in Step (3).

Following line uses the using directive to import the Grid.MVC namespace so that it can be used in the Razor view to create the grid.

Following line uses the using directive to import the App_Start namespace. In the completed application’s App_Start folder, you will find a class named HTMLHelpers.cs which is used to create an Action Link with Twitter Bootstrap icon . I haven’t included this code snippet here as this will make the post very lengthy.

Code to render the grid starts from the HTML helper for Grid.MVC.

Further below in the JavaScript code, PopupCenter method has been used to open the PDF Viewer popup at the center of screen.

Further below in JQuery’s document ready function, class selector is used for the CSS classes of ‘View PDF’ button to display the popup on the button’s click.

Step (6) : Create MVC UploadController class

Upload controller’s code is as follows.

UploadFiles() action method uses HttpPostedFileBase class to upload multiple files. File is read in MemoryStream and then saved to Azure Blob Storage container using CloudBlob class’s UploadFromStream method.

Index() action method is called after the file(s) is/are uploaded.

Step (7) : Create Upload view

Create the Upload Razor view named Index.cshtml as shown follows:-

As you can see in the above code snippet for the Razor view, HTML Helper Html.BeginForm is used to generate an HTML form tag. Form’s method is POST which signifies that the HTML form’s data should be sent in a HTTP POST transaction which appends the form-data inside the body of HTTP request. Form’s encoding type used is “multipart/form-data” means that no characters will be encoded. That is why this type is used while uploading files to server. So multipart/formdata is used when a form requires binary data, like the contents of a file, to be uploaded.

Step (8) : Create DocumentController class

Document controller’s code is as follows.

Index() action method accepts a query string parameter filename. This file is displayed in the View File popup which opens the Document view in the popup. The filename is saved in the ViewBag property to be fetched in the view.

Short description about ViewBag The ViewBag property enables you to dynamically share values from the controller to the view. It is a dynamic object which means it has no pre-defined properties. You define the properties you want the ViewBag to have by simply adding them to the property. In the view, you retrieve those values by using same name for the property.

Step (9) : Create Document view

Create the Document Razor view named Index.cshtml as shown follows:-

This view contains an iFrame to display the file. The file name is fetched from the ViewBag which was populated in previous Step (8) in DocumentController.cs

This concludes the code for ASP.NET MVC Azure Storage Explorer application.

Following screenshots display all the views of the application.

Home Page

Azure Storage Explorer - Home Page

 

Upload Files screenshot provided at top of the article

Upload Files Status

Azure Storage Explorer - Uploaded Files

View File

Azure Storage Explorer - View File

Download File

Azure Storage Explorer - Download Files

 

Delete File

Azure Storage Explorer - Delete File

I hope you liked this article. If you have any comments, questions or suggestions, post your comments using the comments section below this article. I will try to respond at my earliest or somebody else reading the article and your comment will try to respond.

Please subscribe to my blog via email to get updates on the latest articles and also share this article over social networks like Facebook, Twitter etc.


Share this

Leave a Reply