Open document from Dropbox cloud file storage

8 Jan 202412 minutes to read

To load a document from Dropbox cloud file storage in a Document editor, you can follow the steps below

Step 1: Create a Dropbox API

To create a Dropbox API App, you should 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 will allow you to interact with Dropbox programmatically, enabling secure access to files and data.

Step 2: Create a Simple Document Editor Sample in Javascript

Start by following the steps provided in this [link]((../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. 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 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 values from the configuration 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("LoadFromBoxCloud")]
//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))
    {
        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"
}

NOTE

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

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.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 DocumentEditor</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">
    <!-- EJ2 Document Editor dependent theme -->
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" type="text/css"
        rel='nofollow' />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"
        rel='nofollow' />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"
        rel='nofollow' />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"
        rel='nofollow' />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"
        rel='nofollow' />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet"
        type="text/css" rel='nofollow' />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet"
        type="text/css" rel='nofollow' />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet"
        type="text/css" rel='nofollow' />

    <!-- EJ2 Document Editor theme -->
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-documenteditor/styles/material.css" rel="stylesheet"
        type="text/css" rel='nofollow' />

    <!-- EJ2 Document Editor dependent scripts -->
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/dist/global/ej2-base.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-data/dist/global/ej2-data.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-svg-base/dist/global/ej2-svg-base.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-file-utils/dist/global/ej2-file-utils.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-compression/dist/global/ej2-compression.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/dist/global/ej2-buttons.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/dist/global/ej2-popups.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/dist/global/ej2-inputs.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/dist/global/ej2-lists.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/dist/global/ej2-navigations.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/dist/global/ej2-dropdowns.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-calendars/dist/global/ej2-calendars.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-charts/dist/global/ej2-charts.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-office-chart/dist/global/ej2-office-chart.min.js"
        type="text/javascript"></script>
    <!-- EJ2 Document Editor script -->
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/ej2-documenteditor/dist/global/ej2-documenteditor.min.js"
        type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div>
        <button id="load">Open Document From DropBox cloud file storage</button>
    </div>
    <div id='DocumentEditor' style='height:620px'></div>
    <script>
        // Initialize DocumentEditorContainer component.
        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
        documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
        //DocumentEditorContainer control rendering starts
        documenteditorContainer.appendTo('#DocumentEditor');

        document.getElementById('load').addEventListener('click', function () {
            load();
        });
        
        function load() {
            fetch(
                'http://localhost:62870/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 => {
                    documenteditorContainer.documentEditor.open(JSON.stringify(json));
                })
                .catch(error => {
                        console.error(error);
                });
        }
    </script>
</body>

</html>

NOTE

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