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 :
Action | Description |
search | Searches for items matching the search string in the current and sub folders |
read | Read the content of files or folders available in the given path |
create | Create new folder in the current path |
delete | Delete files or folders |
copy | Copy selected file or folder to target path |
move | Cut selected file or folder |
rename | Rename the selected file or folder |
download | Download one or multiple file from blob storage |
upload | Upload file to the current path in blob storage |
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

hi, I’m wondering if you can develop us an authenticated version based on Azure AD B2C to access files to specific users?
Hi,
Sorry for the delay of my feedback, of course this is possible, I can show you a demo example.
You can contact me directly on my email address : radouane.benelrhazi@gmail.com.
Best regards,