Edit Word Docs in React Using Azure Blob Storage

TL;DR: This blog guides you on how to manage and edit Word documents in a React application using Azure Blob Storage and ASP.NET Core Web API. It covers configuring the storage, setting up the backend, and integrating Syncfusion’s Document Editor in the frontend to enable document editing and auto-saving to the cloud.

Managing and editing Word documents within a React application has never been more efficient! In this blog, we’ll walk you through the entire process of integrating Azure Blob Storage, configuring an ASP.NET Core Web API backend, and developing a React frontend to enable smooth document editing and storage.

With Syncfusion’s React Document Editor, you can effortlessly open, edit, and auto-save Word documents within your application. We’ll explore how to build a feature-rich document editing experience with key functionalities such as:

Auto-save for seamless document preservation
Application-level file management using Azure Blob Storage
A customizable toolbar to enhance the document editing workflow

The Syncfusion FileManager component enhances the experience by enabling users to interactively open and save documents directly to and from Azure storage. This integration provides a structured and intuitive way to manage documents within a React application, ensuring scalability, security, and efficiency.

Setting up Azure Blob Storage

Azure Blob Storage is a scalable and secure cloud-based object storage solution from Microsoft, ideal for web applications, backups, and content delivery.

Setting up Azure Blob Storage involves a few key steps, including creating a storage account, configuring a container, and managing access. Here’s a step-by-step guide:

Step 1: Create a storage account

Creating a storage account for setting up azure blob storage

Step 2: Create a blob container

Open the Storage Account, go to Containers under Data Storage, and create a Blob Container to store your files (e.g., documents).

Creating a blob container for setting up azure blob storage

Step 3: Retrieve storage account details

To access and integrate Blob Storage with the backend, you’ll need the Access Key and Connection String, which can be found under the Access Keys section in the Storage Account settings.

Retrieving storage account details when setting up azure blob storage

Setting up ASP.NET Core backend (Server-Side)

Step 1: Create a new ASP.NET Core Web API project

Create an ASP.NET Core Web API project using Visual Studio or the .NET CLI. Then, install Azure.Storage.Blobs NuGet package to interact with Azure Blob Storage, enabling file uploads, downloads, and storage management.

Step 2: Add a configuration entry in appsettings.json

Add the Azure Storage Account details to the appsettings.json file. Include the Account Name, Account Key, Connection String, and Container Name as shown below:

appsettings.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": "*",
  "accountName": "<YOUR STORAGE ACCOUNT NAME>",
  "accountKey": "<YOUR ACCOUNT KEY>",
  "connectionString": "<YOUR CONNECTION STRING>",
  "containerName": "<YOUR CONTAINER NAME>"
}

Step 3: Implement Blob Storage Service

Create a service class ( AzureDocumentStorageService.cs ) to handle file operations. This service includes two key methods:

FetchDocumentAsync – Retrieves a Word document from Azure Blob Storage.
UploadDocumentAsync – Saves and uploads a document file to Azure Blob Storage.

Note: The service class also contains additional methods for the file manager operations. You can explore these in the GitHub project.

AzureDocumentStorageService.cs

/// <summary>
/// Service for handling Azure storage operations using Syncfusion components
/// </summary>
public class AzureDocumentStorageService : IAzureDocumentStorageService
{
    private readonly string _storageConnectionString;
    private readonly string _accountName;
    private readonly string _accountKey;
    private readonly string _containerName;
    private readonly ILogger<AzureDocumentStorageService> _logger;
    private readonly AzureDocumentManager _fileProvider;

    /// <summary>
    /// Initializes Azure storage configuration and file provider
    /// </summary>
    /// <param name="configuration">Application configuration settings</param>
    /// <param name="logger">Logger instance for error tracking</param>
    public AzureDocumentStorageService(
        IConfiguration configuration,
        ILogger<AzureDocumentStorageService> logger)
    {
        // Retrieve necessary configuration values for connecting to Azure storage.
        _storageConnectionString = configuration["connectionString"];
        _accountName = configuration["accountName"];
        _accountKey = configuration["accountKey"];
        _containerName = configuration["containerName"];
        _logger = logger;

        // Initialize Syncfusion Azure File Provider instance.
        _fileProvider = new AzureDocumentManager();

        // Define the base path and file path for the blob storage.
        var basePath = $"https://documenteditorstorage.blob.core.windows.net/{_containerName}";
        var filePath = $"{basePath}/Files";

        // Set the base blob container path for the file provider.
        _fileProvider.SetBlobContainer(basePath, filePath);
        // Register the Azure storage credentials and container name.
        _fileProvider.RegisterAzure(_accountName, _accountKey, _containerName);
    }

    /// <summary>
    /// Retrieves a Word document from Azure and converts it to JSON format
    /// </summary>
    /// <param name="jsonObject">Contains document name for lookup</param>
    /// <returns>Word document content in JSON format</returns>
    public async Task<IActionResult> FetchDocumentAsync(Dictionary<string, string> jsonObject)
    {
        MemoryStream stream = new MemoryStream();
        try
        {
            // Extract the document name from the provided JSON object.
            var documentName = jsonObject["documentName"];
            // Build the blob path for the document.
            var blobPath = GenerateDocumentBlobPath(documentName);
            // Get a reference to the blob client for the specified document.
            var blobClient = CreateBlobClient(blobPath);
            // Check if the blob exists in the container.
            if (await blobClient.ExistsAsync())
            {
                // Download the blob content into the memory stream.
                await blobClient.DownloadToAsync(stream);
                stream.Position = 0;
                // Load the WordDocument from the stream.
                WordDocument document = WordDocument.Load(stream, FormatType.Docx);
                // Serialize the document to JSON using Newtonsoft.Json.
                string json = JsonConvert.SerializeObject(document);
                // Dispose of the document after serialization.
                document.Dispose();
                // Return the JSON content with an OK (200) status.
                return new OkObjectResult(json);
            }
            // If the blob doesn't exist, return a 404 Not Found response.
            return new NotFoundResult();
        }
        catch (Exception ex)
        {
            // Log any exceptions and return a 500 Internal Server Error.
            _logger.LogError(ex, "Document retrieval failed");
            return new StatusCodeResult(500);
        }
        finally
        {
            stream.Dispose();
        }
    }

    /// <summary>
    /// Saves and uploads a document file to Azure storage
    /// </summary>
    /// <param name="data">Form data containing the file to save</param>
    /// <exception cref="Exception">Thrown for save failures</exception>
    public async Task UploadDocumentAsync(IFormCollection data)
    {
        try
        {
            // Retrieve the first file from the form data.
            var file = data.Files[0];
            // Get the document name from the form collection.
            var documentName = ExtractFormValue(data, "documentName");
            // Construct the blob path based on the document name.
            var blobPath = GenerateDocumentBlobPath(documentName);
            // Check if the blob already exists.
            var blobClient = CreateBlobClient(blobPath);
            if (blobClient.Exists())
            {
                // Upload the file content to the existing blob.
                using var stream = new MemoryStream();
                await file.CopyToAsync(stream);
                stream.Position = 0;
                await blobClient.UploadAsync(stream);
            }
            else
            {
                // If the blob does not exist, uploading an empty stream 
                using var stream = new MemoryStream();
                await blobClient.UploadAsync(stream);
            }

        }
        catch (Exception ex)
        {
            // Log errors during file upload and rethrow the exception.
            _logger.LogError(ex, "File upload failed");
            throw;
        }
    }
}

Step 4: Create API endpoints in a controller

Create an API controller ( Controllers/AzureDocumentStorageController.cs ) to handle file operations. This controller includes two key methods, which internally invoke the corresponding service methods:

FetchDocument – Calls the service method to retrieve a Word document from Azure Blob Storage.
UploadDocument – Calls the service method to save and upload a document file to Azure Blob Storage.

Note: This controller also contains additional methods for file operations. Please explore the GitHub example project for more details.

AzureDocumentStorageController.cs

/// <summary>
/// Controller for handling Azure file operations and document management
/// </summary>
[Route("api/[controller]")]
[EnableCors("AllowAllOrigins")]
public class AzureDocumentStorageController : ControllerBase
{
    private readonly IAzureDocumentStorageService _documentStorageService;

    /// <summary>
    /// Constructor injecting the file provider service dependency.
    /// </summary>
    /// <param name="documentStorageService">Service for performing file operations</param>
    public AzureDocumentStorageController(IAzureDocumentStorageService documentStorageService)
    {
        _documentStorageService = documentStorageService;
    }

    /// <summary>
    /// Retrieves a document from Azure storage in JSON format
    /// </summary>
    /// <param name="jsonObject">Contains document name and metadata</param>
    /// <returns>Document content as JSON or error response</returns>
    [HttpPost("FetchDocument")]
    public async Task<IActionResult> FetchDocument([FromBody] Dictionary<string, string> jsonObject)
    {
        return await _documentStorageService.FetchDocumentAsync(jsonObject);
    }

    /// <summary>
    /// Downloads selected files or folders from the Azure file manager
    /// </summary>
    /// <param name="downloadInput">JSON string containing download parameters</param>
    /// <returns>File content stream or error response</returns>
    [HttpPost("DownloadDocument")]
    public object DownloadDocument(string downloadInput)
    {
        if (downloadInput != null)
        {
            // Set serializer options to use camelCase naming policy.
            var options = new JsonSerializerOptions
            {
                PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
            };
            // Deserialize the JSON string to a FileManagerDirectoryContent object
            FileManagerDirectoryContent args = JsonSerializer.Deserialize<FileManagerDirectoryContent>(downloadInput, options);
            return _documentStorageService.DownloadDocument(args);
        }
        // Return null if input is not provided
        return null;
    }

    /// <summary>
    /// Saves and uploads a document to Azure storage
    /// </summary>
    /// <param name="data">Form data containing file and document name</param>
    [HttpPost("UploadDocument")]
    public async Task UploadDocument(IFormCollection data)
    {
        await _documentStorageService.UploadDocumentAsync(data);
    }
}

Setting up React frontend (Client-Side)

Step 1: Create a React app and add dependencies

Create a React app and integrate the Syncfusion components, Word Document Editor, and File Manager , to interact with Azure Blob Storage. This integration enables file uploads, downloads, and storage management within your application.

Word Document Editor is used to open, edit, and auto-save documents.
File Manager is used to browse and manage files stored in Azure Blob Storage interactively.

Step 2: Implement File Manager operations

Create a new TypeScript JSX file ( AzureFileManager.tsx ) to implement the File Manager, which allows users to display, browse, and manage the files stored in Azure Blob Storage.

AzureFileManager.tsx

import * as React from 'react';
import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar } from '@syncfusion/ej2-react-filemanager';
import { DialogComponent } from '@syncfusion/ej2-react-popups';

interface AzureProps {
    // Callback function triggered when a file is selected in the file manager
    onFileSelect: (filePath: string, fileType: string, fileName: string) => void;
}

// AzureFileManager Component - Provides a file management interface for Azure storage
const AzureFileManager: React.FC<AzureProps> = ({ onFileSelect }) => {
    // Base URL for backend API handling Azure file operations
    const hostUrl: string = "http://localhost:62869/";
    // State management for file manager dialog visibility
    const [showFileManager, setShowFileManager] = React.useState(true);
    // Reference to access the FileManager component methods
    let fileManagerRef = React.useRef<FileManagerComponent>(null);

    // Shows the file manager when the open button is clicked and clears the previous selection item
    const handleOpenButtonClick = () => {
        // Clear the previous selection
        if (fileManagerRef.current) {
            fileManagerRef.current.clearSelection();
        }
        setShowFileManager(true);
    };

    // Handles file open event from file manager
    const handleFileOpen = (args: any) => {
        if (args.fileDetails.isFile) {
            const selectedPath = args.fileDetails.path || args.fileDetails.filterPath + args.fileDetails.name;
            const fileType = args.fileDetails.type;
            const fileName = args.fileDetails.name;

            onFileSelect(selectedPath, fileType, fileName); // Pass the file path and file type to load in the Document Editor
            setShowFileManager(false); // Close the File Manager Dialog
        }
    };

    return (
        <div>
            <button id="openAzureFileManager" onClick={handleOpenButtonClick}> 
                Open the Azure file manager
            </button>

            {/* File Manager Dialog */}
            <DialogComponent
                id="dialog-component-sample"
                header="File Manager"
                visible={showFileManager}
                width="80%"
                height="80%"
                showCloseIcon={true}
                closeOnEscape={true}
                target="body"
                beforeClose={() => setShowFileManager(false)}
                onClose={() => setShowFileManager(false)} // Close the dialog when closed
            >
                <FileManagerComponent
                    id="azure-file"
                    ref={fileManagerRef}
                    ajaxSettings={{
                        url: hostUrl + 'api/ AzureDocumentStorage/ ManageDocument',
                        downloadUrl: hostUrl + 'api/ AzureDocumentStorage/ DownloadDocument'
                    }}
                    toolbarSettings={{
                        items: ['SortBy', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Selection', 'View', 'Details']
                    }}
                    contextMenuSettings={{
                        file: ['Open', 'Copy', '|', 'Delete', 'Download', '|', 'Details'],
                        layout: ['SortBy', 'View', 'Refresh', '|', 'Paste', '|', '|', 'Details', '|', 'SelectAll'],
                        visible: true
                    }}
                    fileOpen={handleFileOpen} // Attach the fileOpen event
                >
                    <Inject services={[NavigationPane, DetailsView, Toolbar]} />
                </FileManagerComponent>
            </DialogComponent>
        </div>
    );
};

export default AzureFileManager;

Step 3: Implement Document Editor operations

Create a new TypeScript JSX file ( DocumentEditor.tsx ) to implement the Word Document Editor functionalities, including creating, opening, editing, and saving documents.

1. Custom toolbar options: Import the necessary dependencies and add the following custom toolbar items:

New – Creates a new document.
Open – Displays the File Manager to load a selected document.
Download – Downloads the current document locally.