Azure Blob Storage Web Explorer UI (without source)

Partager

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 :

ActionDescription
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.

Blob storage File manager
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.

Multiple Blob storage file manager
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 NameDate ModifiedType, and Size. Each file has its own small icon representing the file type.

sort Blob storage
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).

Delete Blob storage
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.

Copy cut move azure blob storage

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 :

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
multiple container explorer azure blob storage
  • 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

multiple container explorer azure blob storage

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

container explorer azure blob storage

Partager

4 thoughts on “Azure Blob Storage Web Explorer UI (without source)

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *