Save Documents to Dropbox Cloud Storage in ASP.NET Core DOCX Editor

27 Aug 20268 minutes to read

To save a document to Dropbox cloud file storage, follow these steps:

Step 1: Create a Dropbox API

To create a Dropbox API app, follow the official Dropbox .NET tutorial. 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 DOCX Editor Sample in ASP.NET Core

Follow the steps 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 Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Caching.Memory;
using Microsoft.Extensions.Configuration;
using System.IO;
using Dropbox.Api;
using Dropbox.Api.Files;
  • Add the following private fields and a constructor to the DocumentEditorController class. In the constructor, assign the configuration values to the corresponding fields.
private IWebHostEnvironment _hostingEnvironment;
private IMemoryCache _cache;
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 SaveToDropBox() method to save the document to the Dropbox cloud file storage
[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("SaveToDropBox")]
//Post action for saving the document to Dropbox cloud file storage

public void SaveToDropBox(IFormCollection data)
{
  if (data.Files.Count == 0)
    return;

  IFormFile file = data.Files[0];
  string documentName = this.GetValue(data, "documentName");
  string result = Path.GetFileNameWithoutExtension(documentName);
  string fileName = result + "_downloaded.docx";

  using (var dropBox = new DropboxClient(_accessToken))
  {
      Stream stream = new MemoryStream();
      file.CopyTo(stream);
      stream.Position = 0;

      // Upload the document to Dropbox
      var uploadedFile = await dropBox.Files.UploadAsync(
        _folderName + "/" + fileName,
        WriteMode.Overwrite.Instance,
        body: stream
      );
  }
}
  • Add the following helper method GetValue to the DocumentEditorController class to read form values from the posted data
private string GetValue(IFormCollection data, string key)
{
    if (data.ContainsKey(key))
    {
        string[] values = data[key];
        if (values.Length > 0)
        {
            return values[0];
        }
    }
    return "";
}
  • 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, export the document to a blob using saveAsBlob and send it to the server for saving in Dropbox cloud file storage.

<ejs-button id="export">Save to DropBox Cloud</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('export').addEventListener('click', function () {
            container.documentEditor.saveAsBlob('Docx').then((blob) => {
                var exportedDocument = blob;
                //Now, save the document where ever you want.
                var formData = new FormData();
                formData.append('documentName', container.documentEditor.documentName);
                formData.append('data', exportedDocument);
                /* tslint:disable */
                var req = new XMLHttpRequest();
                // Replace your running Url here
                req.open(
                    'POST',
                    window.baseurl + 'api/documenteditor/SaveToDropBox',
                    true
                );
                req.onreadystatechange = () => {
                    if (req.readyState === 4) {
                        if (req.status === 200 || req.status === 304) {
                            console.log('Saved sucessfully');
                        }
                    }
                };
                req.send(formData);
            });
        });
    }); 
</script>
public ActionResult Default()
{
    return View();
}

The Dropbox.Api NuGet package must be installed in your web service project to use the code above.