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

27 Aug 20268 minutes to read

To save a document to Google Cloud Storage, follow these steps:

Step 1: Create a Simple ASP.NET Core DOCX Editor (Document 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 2: 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 Google.Cloud.Storage.V1;
using Google.Apis.Auth.OAuth2;
  • Add the following private fields and a constructor to the DocumentEditorController class. In the constructor, assign the configuration values to the corresponding fields.
// Private readonly object _storageClient
private readonly StorageClient _storageClient;

private IWebHostEnvironment _hostingEnvironment;
private IMemoryCache _cache;
private IConfiguration _configuration;

public readonly string _bucketName;

public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
{
  _hostingEnvironment = hostingEnvironment;
  _cache = cache;

  // The key file is used to authenticate with Google Cloud Storage.
  string keyFilePath = "path/to/service-account-key.json";

  // Load the service account credentials from the key file.
  var credentials = GoogleCredential.FromFile(keyFilePath);

  // Create a storage client with Application Default Credentials
  _storageClient = StorageClient.Create(credentials);

   _configuration = configuration;

   _bucketName = _configuration.GetValue<string>("BucketName");
}
  • Create the SaveToGoogleCloud() method to save the document to the Google Cloud Storage bucket
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("SaveToGoogleCloud")]
//Post action for saving the document to Google Cloud Storage

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

  IFormFile file = data.Files[0];
  string documentName = this.GetValue(data, "documentName");
  // Derive the object name from the original document name (without extension)
  string documentNameWithoutExt = Path.GetFileNameWithoutExtension(documentName);

  string bucketName = _bucketName;

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

  // Upload the document to Google Cloud Storage
  _storageClient.UploadObject(bucketName, documentNameWithoutExt + "_downloaded.docx", null, 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": "*",
  "BucketName": "Your Bucket name from Google Cloud Storage"
}

  1. Replace Your Bucket name from Google Cloud Storage with the actual name of your Google Cloud Storage bucket.
  2. Replace path/to/service-account-key.json with the actual file path to your service account key JSON file. Make sure to provide the correct path and filename.

Step 3: 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 Google Cloud Storage.

<ejs-button id="export">Save to Google 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/SaveToGoogleCloud',
                    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 Google.Cloud.Storage.V1 NuGet package must be installed in your web service project to use the code above.