Open Documents from Dropbox in ASP.NET Core DOCX Editor

27 Aug 20267 minutes to read

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

Step 1: Create a Dropbox API

To create a Dropbox app, follow the official documentation provided by Dropbox link. The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app enables programmatic access to Dropbox files and data.

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

The Dropbox.Api NuGet package must be installed in your application to use the following code example.

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

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

using System.IO;
using Dropbox.Api;
using Dropbox.Api.Files;

• 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 _folderName;

public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
{
  _hostingEnvironment = hostingEnvironment;
  _cache = cache;
   _configuration = configuration;
  _accessToken = _configuration.GetValue<string>("AccessToken");
  _folderName = _configuration.GetValue<string>("FolderName");
}

• Create the LoadFromDropBox() method to load the document from Dropbox cloud file storage.

[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("LoadFromDropBox")]
//Post action for Loading the documents

public async Task<string> LoadFromDropBox([FromBody] Dictionary<string, string> jsonObject)
{
    if (jsonObject == null && !jsonObject.ContainsKey("documentName"))
    {
      return null;
    }
    MemoryStream stream = new MemoryStream();

    using (var dropBox = new DropboxClient(_accessToken))
    {
        var fileName = jsonObject["documentName"];
        using (var response = await dropBox.Files.DownloadAsync(_folderName + "/" + fileName))
        {
          var byteArray = await response.GetContentAsByteArrayAsync();
          stream = new MemoryStream(byteArray);
        }
    }
    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_Dropbox_Access_Token",
  "FolderName": "Your_Folder_Name"
}

Replace Your_Dropbox_Access_Token with your actual Dropbox access token, and Your_Folder_Name with your folder name.

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.

CSHTML

<ejs-button id="load">Open Document From DropBox 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/LoadFromDropBox',
                {
                    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>

Document-editor.cs

public ActionResult Default()
{
    return View();
}