Azure cloud file system provider

9 Mar 20264 minutes to read

Introduction to Azure Blob Storage

Azure Blob Storage is Microsoft Azure’s object storage solution for the cloud, optimized for storing massive amounts of unstructured data. In this guide, the Syncfusion Blazor File Manager connects to Blob Storage through an ASP.NET Core backend so you can securely browse and perform file operations in the File Manager component.

Prerequisites

Before you integrate Azure Blob Storage with the Syncfusion Blazor File Manager, ensure you have:

• An active Microsoft Azure subscription
• A Storage Account with Blob service enabled
• A Blob Container and an optional root folder inside that container
• Azure credentials: accountName, accountKey, and blobName

Setting Up Azure Blob Storage

• Sign in to the Azure Portal and create a storage account with Blob service enabled.
• Create a Blob Container (example: files). See Azure docs for container naming rules.

Backend Setup

Clone the Azure File Provider using the following command,

git clone https://github.com/SyncfusionExamples/ej2-azure-aspcore-file-provider ej2-azure-aspcore-file-provider

NOTE

This Azure Blob Storage provider for the Syncfusion Blazor File Manager is intended for demonstration and evaluation only. Before using it in production, consult your security team and complete a security review.

To initialize a local service with the above-mentioned file operations, create a folder named Controllers in the server project. Then, create a .cs file in the Controllers folder and add the required file operation code from AzureProviderController.cs. You can also find the method-level details for this provider in the same repository.

Registering Azure Credentials in the Provider

After cloning, open the project in Visual Studio and restore the NuGet packages. Then, register Azure Storage by passing accountName, accountKey, and blobName to the RegisterAzure method in the AzureProviderController.cs file.

this.operation.RegisterAzure("<--accountName-->", "<--accountKey-->", "<--blobName-->");

Then, set the blob container and the root blob directory by passing the corresponding URLs as parameters to the SetBlobContainer method, as shown below.

public AzureProviderController(IHostingEnvironment hostingEnvironment)
{
    this.operation = new AzureFileProvider();
    blobPath = "<--blobPath-->";
    filePath = "<--filePath-->";
    ...
    this.operation.SetBlobContainer(blobPath, filePath);
}

NOTE

The blobPath represents a container path in Azure Blob Storage, and filePath refers to the file location path. For example, create a container named blob in the specified Azure Blob Storage account. Inside that container, create a folder named Files that contains all the files and folders to be displayed in the File Manager. Refer to the following paths as an example.

public AzureProviderController(IHostingEnvironment hostingEnvironment)
{
    this.operation = new AzureFileProvider();
    blobPath = "https://azure_service_account.blob.core.windows.net/blob/";
    filePath = "https://azure_service_account.blob.core.windows.net/blob/Files";
    ...
}

Configuring Syncfusion File Manager UI

To configure File Manager component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install Syncfusion.Blazor.FileManager and Syncfusion.Blazor.Themes. Integrate the FileManager component by pasting the below code in your .razor file of the Blazor application. Click this link for more details.

Now, build and run the Azure File Service provider project. It will be hosted in http://localhost:{port}. Map the FileManagerAjaxSettings of the File Manager component to the AzureProvider controller endpoints (Url, UploadUrl, DownloadUrl, GetImageUrl) to manage blobs in your Azure Blob Storage container.

@*Initializing File Manager with Azure service.*@

@* Replace the hosted port number in the place of "{port}" *@

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="http://localhost:{port}/api/AzureProvider/AzureFileOperations"
                             UploadUrl="http://localhost:{port}/api/AzureProvider/AzureUpload"
                             DownloadUrl="http://localhost:{port}/api/AzureProvider/AzureDownload"
                             GetImageUrl="http://localhost:{port}/api/AzureProvider/AzureGetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

To perform file operations (Read, Create, Rename, Delete, Get file details, Search, Copy, Move, Upload, Download, GetImage) in the Syncfusion^® Blazor File Manager component using the Azure cloud file system provider, initialize the Azure cloud provider in the controller.

Supported File Operations

We have enabled below list of features that can be performed using Azure File Service provider,

Operation	Function
Upload	Directory upload Sequential upload Chunk upload Auto upload Drag and drop upload
Access Control	Setting rules to files/folders Supported rules

Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository. To access the live Azure File Provider demo refer to this link

NOTE

To learn more about the file actions supported by the Azure cloud file system provider, refer to the key features.