Open document from Box cloud file storage in JavaScript (ES6) Document editor

22 Jun 20268 minutes to read

To load a document from Box cloud file storage in a TypeScript 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, you’ll need a developer account with Box. Go to the Box Developer Console, sign in or create a new account, and then create a new Box application. This application will provide you with the necessary credentials Client ID and Client Secret to authenticate and access Box APIs. Before accessing files, you need to authenticate your application to access your Box account. Box API supports OAuth 2.0 authentication for this purpose.

Step 2: Create a Simple Document Editor Sample in TypeScript

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

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

  • Create a web service project in .NET Core 3.0 or above. You can refer to this link for instructions on how to create a 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 values from the configuration 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"
}

NOTE

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.

Step 4: Modify the index File in the Document Editor sample

In the client-side, the document is returned from the web service is opening using open method.

import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';

// Inject require modules.
DocumentEditorContainer.Inject(Toolbar);

//Initialize Document Editor component
let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });

// Render Document Editor component.
documentEditorContainer.appendTo('#DocumentEditor');

document.getElementById('load').addEventListener('click', (): void => {
  load();
});

function load(): void {
  fetch(
    'http://localhost:62870/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 => {
      documentEditorContainer.documentEditor.open(JSON.stringify(json));
    })
    .catch(error => {
      console.error(error);
    });
} console.error(error);
  });
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div>
        <button id="load">Open Document From Box cloud file storage</button>
    </div>
    <div id="DocumentEditor"></div>
</body>

</html>

NOTE

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