Effortlessly Open, Edit, and Auto-Save Phrase Paperwork in React with Azure Blob Storage

May 4, 2025

14

TL;DR: This weblog guides you on tips on how to handle and edit Phrase paperwork in a React utility utilizing Azure Blob Storage and ASP.NET Core Internet API. It covers configuring the storage, organising the backend, and integrating Syncfusion’s Doc Editor within the frontend to allow doc enhancing and auto-saving to the cloud.

Managing and enhancing Phrase paperwork inside a React utility has by no means been extra environment friendly! On this weblog, we’ll stroll you thru the complete technique of integrating Azure Blob Storage, configuring an ASP.NET Core Internet API backend, and growing a React frontend to allow easy doc enhancing and storage.

With Syncfusion’s React Doc Editor, you possibly can effortlessly open, edit, and auto-save Phrase paperwork inside your utility. We’ll discover tips on how to construct a feature-rich doc enhancing expertise with key functionalities akin to:

Auto-save for seamless doc preservation
Utility-level file administration utilizing Azure Blob Storage
A customizable toolbar to reinforce the doc enhancing workflow

The Syncfusion FileManager element enhances the expertise by enabling customers to interactively open and save paperwork on to and from Azure storage. This integration offers a structured and intuitive approach to handle paperwork inside a React utility, making certain scalability, safety, and effectivity.

Organising Azure Blob Storage

Azure Blob Storage is a scalable and safe cloud-based object storage answer from Microsoft, ideally suited for internet purposes, backups, and content material supply.

Organising Azure Blob Storage includes just a few key steps, together with making a storage account, configuring a container, and managing entry. Right here’s a step-by-step information:

Step 1: Create a storage account

Sign up to the Azure portal, navigate to Storage Accounts, and create a brand new storage account.

Step 2: Create a blob container

Open the Storage Account, go to Containers underneath Knowledge Storage, and create a Blob Container to retailer your information (e.g., paperwork).

Step 3: Retrieve storage account particulars

To entry and combine Blob Storage with the backend, you’ll want the Entry Key and Connection String, which will be discovered underneath the Entry Keys part within the Storage Account settings.

Organising ASP.NET Core backend (Server-Aspect)

Step 1: Create a brand new ASP.NET Core Internet API mission

Create an ASP.NET Core Internet API mission utilizing Visible Studio or the .NET CLI. Then, set up Azure.Storage.Blobs NuGet package deal to work together with Azure Blob Storage, enabling file uploads, downloads, and storage administration.

Step 2: Add a configuration entry in appsettings.json

Add the Azure Storage Account particulars to the appsettings.json file. Embrace the Account Title, Account Key, Connection String, and Container Title as proven under:

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 deal with file operations. This service consists of two key strategies:

FetchDocumentAsync – Retrieves a Phrase doc from Azure Blob Storage.
UploadDocumentAsync – Saves and uploads a doc file to Azure Blob Storage.

Observe: The service class additionally comprises extra strategies for the file supervisor operations. You’ll be able to discover these within the GitHub mission.

AzureDocumentStorageService.cs

/// <abstract>
/// Service for dealing with Azure storage operations utilizing Syncfusion parts
/// </abstract>
public class AzureDocumentStorageService : IAzureDocumentStorageService
{
    personal readonly string _storageConnectionString;
    personal readonly string _accountName;
    personal readonly string _accountKey;
    personal readonly string _containerName;
    personal readonly ILogger<AzureDocumentStorageService> _logger;
    personal readonly AzureDocumentManager _fileProvider;

    /// <abstract>
    /// Initializes Azure storage configuration and file supplier
    /// </abstract>
    /// <param identify="configuration">Utility configuration settings</param>
    /// <param identify="logger">Logger occasion for error monitoring</param>
    public AzureDocumentStorageService(
        IConfiguration configuration,
        ILogger<AzureDocumentStorageService> logger)
    {
        // Retrieve needed 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 Supplier occasion.
        _fileProvider = new AzureDocumentManager();

        // Outline the bottom path and file path for the blob storage.
        var basePath = $"https://documenteditorstorage.blob.core.home windows.internet/{_containerName}";
        var filePath = $"{basePath}/Information";

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

    /// <abstract>
    /// Retrieves a Phrase doc from Azure and converts it to JSON format
    /// </abstract>
    /// <param identify="jsonObject">Incorporates doc identify for lookup</param>
    /// <returns>Phrase doc content material in JSON format</returns>
    public async Activity<IActionResult> FetchDocumentAsync(Dictionary<string, string> jsonObject)
    {
        MemoryStream stream = new MemoryStream();
        attempt
        {
            // Extract the doc identify from the offered JSON object.
            var documentName = jsonObject["documentName"];
            // Construct the blob path for the doc.
            var blobPath = GenerateDocumentBlobPath(documentName);
            // Get a reference to the blob shopper for the required doc.
            var blobClient = CreateBlobClient(blobPath);
            // Test if the blob exists within the container.
            if (await blobClient.ExistsAsync())
            {
                // Obtain the blob content material into the reminiscence stream.
                await blobClient.DownloadToAsync(stream);
                stream.Place = 0;
                // Load the WordDocument from the stream.
                WordDocument doc = WordDocument.Load(stream, FormatType.Docx);
                // Serialize the doc to JSON utilizing Newtonsoft.Json.
                string json = JsonConvert.SerializeObject(doc);
                // Get rid of the doc after serialization.
                doc.Dispose();
                // Return the JSON content material with an OK (200) standing.
                return new OkObjectResult(json);
            }
            // If the blob does not exist, return a 404 Not Discovered response.
            return new NotFoundResult();
        }
        catch (Exception ex)
        {
            // Log any exceptions and return a 500 Inner Server Error.
            _logger.LogError(ex, "Doc retrieval failed");
            return new StatusCodeResult(500);
        }
        lastly
        {
            stream.Dispose();
        }
    }

    /// <abstract>
    /// Saves and uploads a doc file to Azure storage
    /// </abstract>
    /// <param identify="information">Type information containing the file to save lots of</param>
    /// <exception cref="Exception">Thrown for save failures</exception>
    public async Activity UploadDocumentAsync(IFormCollection information)
    {
        attempt
        {
            // Retrieve the primary file from the shape information.
            var file = information.Information[0];
            // Get the doc identify from the shape assortment.
            var documentName = ExtractFormValue(information, "documentName");
            // Assemble the blob path based mostly on the doc identify.
            var blobPath = GenerateDocumentBlobPath(documentName);
            // Test if the blob already exists.
            var blobClient = CreateBlobClient(blobPath);
            if (blobClient.Exists())
            {
                // Add the file content material to the prevailing blob.
                utilizing var stream = new MemoryStream();
                await file.CopyToAsync(stream);
                stream.Place = 0;
                await blobClient.UploadAsync(stream);
            }
            else
            {
                // If the blob doesn't exist, importing an empty stream 
                utilizing var stream = new MemoryStream();
                await blobClient.UploadAsync(stream);
            }

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

Step 4: Create API endpoints in a controller

Create an API controller (Controllers/AzureDocumentStorageController.cs) to deal with file operations. This controller consists of two key strategies, which internally invoke the corresponding service strategies:

FetchDocument – Calls the service technique to retrieve a Phrase doc from Azure Blob Storage.
UploadDocument – Calls the service technique to save lots of and add a doc file to Azure Blob Storage.

Observe: This controller additionally comprises extra strategies for file operations. Please discover the GitHub instance mission for extra particulars.

AzureDocumentStorageController.cs

/// <abstract>
/// Controller for dealing with Azure file operations and doc administration
/// </abstract>
[Route("api/[controller]")]
[EnableCors("AllowAllOrigins")]
public class AzureDocumentStorageController : ControllerBase
{
    personal readonly IAzureDocumentStorageService _documentStorageService;

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

    /// <abstract>
    /// Retrieves a doc from Azure storage in JSON format
    /// </abstract>
    /// <param identify="jsonObject">Incorporates doc identify and metadata</param>
    /// <returns>Doc content material as JSON or error response</returns>
    [HttpPost("FetchDocument")]
    public async Activity<IActionResult> FetchDocument([FromBody] Dictionary<string, string> jsonObject)
    {
        return await _documentStorageService.FetchDocumentAsync(jsonObject);
    }

    /// <abstract>
    /// Downloads chosen information or folders from the Azure file supervisor
    /// </abstract>
    /// <param identify="downloadInput">JSON string containing obtain parameters</param>
    /// <returns>File content material stream or error response</returns>
    [HttpPost("DownloadDocument")]
    public object DownloadDocument(string downloadInput)
    {
        if (downloadInput != null)
        {
            // Set serializer choices to make use of camelCase naming coverage.
            var choices = new JsonSerializerOptions
            {
                PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
            };
            // Deserialize the JSON string to a FileManagerDirectoryContent object
            FileManagerDirectoryContent args = JsonSerializer.Deserialize<FileManagerDirectoryContent>(downloadInput, choices);
            return _documentStorageService.DownloadDocument(args);
        }
        // Return null if enter will not be offered
        return null;
    }

    /// <abstract>
    /// Saves and uploads a doc to Azure storage
    /// </abstract>
    /// <param identify="information">Type information containing file and doc identify</param>
    [HttpPost("UploadDocument")]
    public async Activity UploadDocument(IFormCollection information)
    {
        await _documentStorageService.UploadDocumentAsync(information);
    }
}

Organising React frontend (Consumer-Aspect)

Step 1: Create a React app and add dependencies

Create a React app and combine the Syncfusion parts, Phrase Doc Editor, and File Supervisor , to work together with Azure Blob Storage. This integration permits file uploads, downloads, and storage administration inside your utility.

Phrase Doc Editor is used to open, edit, and auto-save paperwork.
File Supervisor is used to browse and handle information saved in Azure Blob Storage interactively.

Step 2: Implement File Supervisor operations

Create a brand new TypeScript JSX file (AzureFileManager.tsx) to implement the File Supervisor, which permits customers to show, browse, and handle the information saved 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 operate triggered when a file is chosen within the file supervisor
    onFileSelect: (filePath: string, fileType: string, fileName: string) => void;
}

// AzureFileManager Element - Gives a file administration interface for Azure storage
const AzureFileManager: React.FC<AzureProps> = ({ onFileSelect }) => {
    // Base URL for backend API dealing with Azure file operations
    const hostUrl: string = "http://localhost:62869/";
    // State administration for file supervisor dialog visibility
    const [showFileManager, setShowFileManager] = React.useState(true);
    // Reference to entry the FileManager element strategies
    let fileManagerRef = React.useRef<FileManagerComponent>(null);

    // Reveals the file supervisor when the open button is clicked and clears the earlier choice merchandise
    const handleOpenButtonClick = () => {
        // Clear the earlier choice
        if (fileManagerRef.present) {
            fileManagerRef.present.clearSelection();
        }
        setShowFileManager(true);
    };

    // Handles file open occasion from file supervisor
    const handleFileOpen = (args: any) => {
        if (args.fileDetails.isFile)  args.fileDetails.filterPath + args.fileDetails.identify;
            const fileType = args.fileDetails.sort;
            const fileName = args.fileDetails.identify;

            onFileSelect(selectedPath, fileType, fileName); // Cross the file path and file sort to load within the Doc Editor
            setShowFileManager(false); // Shut the File Supervisor Dialog
        
    };

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

            {/* File Supervisor Dialog */}
            <DialogComponent
                id="dialog-component-sample"
                header="File Supervisor"
                seen={showFileManager}
                width="80%"
                peak="80%"
                showCloseIcon={true}
                closeOnEscape={true}
                goal="physique"
                beforeClose={() => setShowFileManager(false)}
                onClose={() => setShowFileManager(false)} // Shut the dialog when closed
            >
                <FileManagerComponent
                    id="azure-file"
                    ref={fileManagerRef}
                    ajaxSettings={{
                        url: hostUrl + 'api/ AzureDocumentStorage/ ManageDocument',
                        downloadUrl: hostUrl + 'api/ AzureDocumentStorage/ DownloadDocument'
                    }}
                    toolbarSettings={{
                        objects: ['SortBy', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Selection', 'View', 'Details']
                    }}
                    contextMenuSettings={',  '}
                    fileOpen={handleFileOpen} // Connect the fileOpen occasion
                >
                    <Inject companies={[NavigationPane, DetailsView, Toolbar]} />
                </FileManagerComponent>
            </DialogComponent>
        </div>
    );
};

export default AzureFileManager;

Step 3: Implement Doc Editor operations

Create a brand new TypeScript JSX file (DocumentEditor.tsx) to implement the Phrase Doc Editor functionalities, together with creating, opening, enhancing, and saving paperwork.

1. Customized toolbar choices: Import the mandatory dependencies and add the next customized toolbar objects:

New – Creates a brand new doc.
Open – Shows the File Supervisor to load a particular doc.
Obtain – Downloads the present doc domestically.