Save Documents to Box Cloud File Storage in ASP.NET MVC DOCX Editor

27 Aug 20268 minutes to read

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

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

You need a Box developer account to access Box storage programmatically. Go to the Box Developer Console, sign in or create a new account, and then create a new Box application. This application provides the Client ID and Client Secret credentials used to authenticate and access the Box APIs. Authenticate your application to access your Box account. The Box API supports OAuth 2.0 for this purpose.

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

Follow the steps in this link to create a simple DOCX Editor sample in ASP.NET MVC. This gives 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 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 SaveToBoxCloud() method to save the uploaded document to Box cloud file storage.
[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("SaveToBoxCloud")]
// Post action for uploading the document to Box

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

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

  // 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);

  var fileRequest = new BoxFileRequest
  {
    Name = result + "_downloaded.docx",
    Parent = new BoxFolderRequest { Id = _folderID },
  };

  Stream stream = new MemoryStream();
  file.CopyTo(stream);

  var boxFile = await client.FilesManager.UploadAsync(fileRequest, stream);
} 
 
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, and 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.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 to save it in Box cloud file storage.

@Html.EJS().Button("export").Content("Save to Box Cloud").Render()
@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Render()

<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/SaveToBoxCloud',
                    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();
}

NOTE

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