Open Documents from Box Cloud File Storage in ASP.NET Core DOCX Editor

27 Aug 20268 minutes to read

To load a document from Box cloud file storage in a ASP.NET Core DOCX Editor (Document Editor), you can follow the steps below.

Step 1: Set up a Box developer account and create a Box application

To access Box storage programmatically, a Box developer account is required. Go to the Box Developer Console, sign in or create a new account, and then create a new Box application. This application provides the necessary credentials — Client ID and Client Secret — to authenticate and access Box APIs. Before accessing files, the application must be authenticated to access your Box account. Box uses OAuth 2.0 for authentication.

Step 2: Create a Simple DOCX Editor Sample in ASP.NET Core

Start by following the steps provided in this link to create a simple DOCX Editor sample in ASP.NET Core. This will give you a basic setup of the DOCX Editor component.

Step 3: Modify the DocumentEditorController.cs File in the Web Service Project

  • Open the DocumentEditorController.cs file in your web service project.

  • Import the required namespaces at the top of the file:

using Box.V2;
using Box.V2.Auth;
using Box.V2.Config;
using Box.V2.Models;
  • Add the following private fields and constructor parameters to the DocumentEditorController class. In the constructor, assign the configuration values to the corresponding fields.
private IConfiguration _configuration;
public readonly string _accessToken;
public readonly string _clientID;
public readonly string _clientSecret;
public readonly string _folderID;

public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
{
  _hostingEnvironment = hostingEnvironment;
  _cache = cache;
   _configuration = configuration;
  _accessToken = _configuration.GetValue<string>("AccessToken");
  _clientID = _configuration.GetValue<string>("ClientID");
  _clientSecret = _configuration.GetValue<string>("ClientSecret");
  _folderID = _configuration.GetValue<string>("FolderID");
}
  • Create the LoadFromBoxCloud() method to load the document from Box cloud file storage.
[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("LoadFromBoxCloud")]
//Post action for Loading the documents

public async Task<string> LoadFromBoxCloud([FromBody] Dictionary<string, string> jsonObject)
{
    if (jsonObject == null && !jsonObject.ContainsKey("documentName"))
    {
      return null;
    }
    MemoryStream stream = new MemoryStream();
    // Initialize the Box API client with your authentication credentials
    var auth = new OAuthSession(_accessToken, "YOUR_REFRESH_TOKEN", 3600, "bearer");
    var config = new BoxConfigBuilder(_clientID, _clientSecret, new Uri("http://boxsdk")).Build();
    var client = new BoxClient(config, auth);

    // Download the file from Box storage
    var items = await client.FoldersManager.GetFolderItemsAsync(_folderID, 1000, autoPaginate: true);
    var files = items.Entries.Where(i => i.Type == "file");

    // Filter the files based on the objectName
    var matchingFile = files.FirstOrDefault(file => file.Name == objectName);

    // Fetch the file from Box storage by its name
    var fileStream = await client.FilesManager.DownloadAsync(matchingFile.Id);
    stream = new MemoryStream();
    await fileStream.CopyToAsync(stream);

    // Reset the position to the beginning of the stream
    stream.Position = 0;

    WordDocument document = WordDocument.Load(stream, FormatType.Docx);
    string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
    document.Dispose();
    stream.Close();
    return json;
}
  • Open the appsettings.json file in your web service project, Add the following lines below the existing "AllowedHosts" configuration
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "AccessToken": "Your_Box_Storage_Access_Token",
  "FolderID": "Your_Folder_ID",
  "ClientID": "Your_Box_Storage_ClientID",
  "ClientSecret": "Your_Box_Storage_ClientSecret"
}

Replace Your_Box_Storage_Access_Token with your actual Box access token, and Your_Folder_ID with the ID of the folder in your Box storage where you want to perform specific operations. Remember to use your valid Box API credentials, as Your_Box_Storage_ClientID and Your_Box_Storage_ClientSecret are placeholders for your application’s API key and secret, respectively.

Step 4: Modify the Index.cshtml File in the DOCX Editor sample

On the client side, the document returned from the web service is opened using the open method.

<ejs-button id="load">Open Document From Box cloud file storage</ejs-button>
<ejs-documenteditorcontainer id="container"></ejs-documenteditorcontainer>
<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");        
        container = documenteditorElement.ej2_instances[0];
        document.getElementById('load').addEventListener('click', function () {
            fetch(
                window.baseurl + 'api/documenteditor/LoadFromBoxCloud',
                {
                    method: 'Post',
                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
                    body: JSON.stringify({ documentName: 'Getting Started.docx' })
                }
            )
                .then(response => {
                    if (response.status === 200 || response.status === 304) {
                        return response.json(); // Return the Promise
                    } else {
                        throw new Error('Error loading data');
                    }
                })
                .then(json => {
                    container.documentEditor.open(JSON.stringify(json));
                })
                .catch(error => {
                    console.error(error);
                });
        });
    }); 
</script>
public ActionResult Default()
{
    return View();
}

The Box.V2.Core NuGet package must be installed in your application to use the previous code example.