Azure Blob Storage Web Explorer UI (without source)

About

Overview

Azure Blob Storage Web Explorer (without source) is the first web application for managing one or multiple blobs container on Azure storage as a simple file explorer that allows you to perform most file operations. You can use it directly or as Iframe on your existing web application.

Features

The following table represents the operations available in Azure storage web explorer :

Live demo

Click here for live application execution

Video demo

User interface

The graphical component used to manage file is comprised of several sections like view, toolbar, breadcrumb, context menu, and so on.

Multiple blob container support

The multiple blob container allows you to manage and explore more than one Azure blob storage in the same user interface.

Toolbar

The Toolbar provides easy access to the file operations using different buttons and it is presented at the top of the file manager.

Tree view

The Tree View displays the folder hierarchy of the file system and provides easy navigation to the desired folder.

Breadcrumb

The file manager provides breadcrumb for navigating to the parent folders. The breadcrumb the in file manager is responsible for resizing. Whenever the path length exceeds the breadcrumb length, a dropdown button will be added at the starting of the breadcrumb to hold the parent folders adjacent to root.

View

View is the section where the files and folders are displayed for the user to browse. The file manager has two types of views to display the files and folders.

Large icons view

In the large icons view, the thumbnail icons will be shown in a larger size, which displays the data in a form that best suits their content. For image and video type files, a preview will be displayed. Extension thumbnails will be displayed for other type files.

Details view

In the details view, the files are displayed in a sorted list order. This file list comprises of several columns of information about the files such as Name, Date Modified, Type, and Size. Each file has its own small icon representing the file type.

Context menu

The context menu appears on user interaction such as right-click. The file manager is provided with context menu support to perform list of file operations with the files and folders. Context menu appears with varying menu items based on the targets such as file, folder (including navigation pane folders), and layout (empty area in view).

Multiple File Selection

The multiple selection can be done by pressing the Ctrl key or Shift key and selecting the files. The check box can also be used to do multiple selection. Ctrl + A can be used to select all files in the current directory.

Getting Started

Install and deploy

The package delivered is published under .Net Core Framework and ready to deploy on your Windows or Linux web server. Please refer to Please refer to those articles to deploy .Net Core application :

• https://logicmind.fr/2020/01/15/azure-storage-web-explorer-api/#install-core-app
• https://logicmind.fr/2020/02/09/deployer-une-application-net-core-sur-iis/
• https://youtu.be/RZsfmRKBtDQ

Settings

After unzip the deployment package, open « appsettings.json file » to setup the application explained below :

BlobConnectionString

"BlobConnectionString": [
    {
      "id": "1",
      "connectionString": "<your first blob connection string>",
      "container": "<your container name>"
    },
    {
      "id": "2",
      "connectionString": "<your second blob connection string>",
      "container": "<your second container name>"
    }
  ]

You can manage and explore more than one Blob storage :

• id : internal id to identify you blob storage list
• connectionString : you Azure blob connection string
• container : your blob container name

If you have juste one Blob to explore the drop down list will not appear.

AppSettings

"AppSettings": {
    "Height": "650px",
    "DropDownListLabel": "Storage container",
    "DropDownListPlaceholder": "Select your blob storage container"
  }

AppSettings allows to custom the application render :

• Height : defines the user interface height
• DropDownListLabel : set the blob drop down list label

• DropDownListPlaceholder : set the custom label of drop down list placeholder

Azure Container setting

To authorize the UI access to Azure Blob Container you must change container default access level :

Select you Azure Container

Click on Change access level and select Blob and click on Ok