ASP.NET Core File Manager - How to Display Files Hosted on Azure

ASP.NET Team Blog
14 August 2019

If your web application stores files within a cloud service, you'll find that visualizing a file system can be both cumbersome and time-consuming. In this blog post, we’ll briefly explain Azure storage, what the main problems are, and show you how you can use our ASP.NET Core File Manager to display hierarchical file information in your next web app.

Azure Data Storage

The following diagram illustrates the main concepts of Azure's storage structure:

Azure Data Storage

Unlike a local file system, Azure stores files in blobs, stored in blob containers. A blob container can contain several blobs. By default, Azure provides the files in your containers as a plain list. If you want to display files and folders hierarchically, you should create a custom file storage based on Azure blob storage data. See Creating an Azure Blob Hierarchy.

Creating a Custom File System

To help get you started, we created a solution with a custom file system provider that organizes files into a hierarchical file system. Follow the steps below to include this solution in your application.

  1. Download the source code for our ASP.NET Core sample project.
  2. Add the project to your Visual Studio solution.
  3. Execute the following command in the Visual Studio NuGet Package Manager Console to install the Microsoft.Azure.Storage.Blob Nuget package:
    dotnet add package Microsoft.Azure.Storage.Blob --version 11.0.0
  4. To connect the DevExpress File Manager to Azure storage, create a custom file system provider that implements the IFileProvider interface (this is the AzureBlobFileProvider class in our sample).
  5. Use the Azure SDK to implement the necessary code to manage (rename, remove, copy, etc.) storage data.
  6. Specify an account name, container name and corresponding access key to access the appropriate container in your storage.
  7. Assign your custom file system provider to the FileSystemConfiguration.FileSystemProvider property and apply security permissions to files and folders:
public IActionResult FileSystem(FileSystemCommand command, string arguments)
{
	var config = new FileSystemConfiguration
    {
		Request = Request,
		FileSystemProvider = new AzureBlobFileProvider(),
		AllowCopy = true,
		AllowCreate = true,
		AllowMove = true,
		AllowRemove = true,
		AllowRename = true,
		AllowUpload = true,
		UploadTempPath = _hostingEnvironment.ContentRootPath + "/wwwroot/UploadTemp"
	};
    var processor = new FileSystemCommandProcessor(config);
   	var result = processor.Execute(command, arguments);
   	return Ok(result.GetClientCommandResult());
}
Note: You can use a similar approach to bind our ASP.NET Core File Manager to a different cloud service.

Survey

If you’re currently using the DevExpress ASP.NET File Manager control and expect to use Azure in an upcoming project, we’d love to hear from you. Please share your experiences with us below.

3 comment(s)
Ben_Hayat
Ben_Hayat
Hi Mehul;

For our project we will be using Azure Storage for storing users' images and PDFs.
It would be super helpful if DevEx can provide an Azure Storage File manager that works with Azure storage right out of the box.

If you plan to do so, there must be some way for us to the File Manager to filter files that is only for a specific user (meaning we must create sub folders for all users).
If this decision is approved, I'd love to see this feature in 19.2 version.

Thank in advance!
..Ben
14 August, 2019
Lluis Franco
Lluis Franco
@Ben_Hayat +1 here1 :D
15 August, 2019
Joe Mancuso
Joe Mancuso
@Ben_Hayat +1 here1 :D
25 September, 2019

Please login or register to post comments.