Open document from Google Cloud Storage

5 Jan 202411 minutes to read

To load a document from Google Cloud Storage in a Document editor, you can follow the steps below

Step 1: Create a Simple Document Editor Sample in Javascript

Start by following the steps provided in this link to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.

Step 2: 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 Google.Cloud.Storage.V1;
using Google.Apis.Auth.OAuth2;

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 readonly object _storageClient
private readonly StorageClient _storageClient;

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 LoadFromGoogleCloud() method to load the document from Google Cloud Storage.

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

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

    string bucketName = _bucketName;
    string objectName = jsonObject["document"];
    _storageClient.DownloadObject(bucketName, objectName, stream);
    stream.Position = 0;

    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": "*",
  "BucketName": "Your Bucket name from Google Cloud Storage"
}

NOTE

Replace Your Bucket name from Google Cloud Storage with the actual name of your Google Cloud Storage bucket

NOTE

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 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 Google cloud 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/LoadFromGoogleCloud',
                {
                    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 Google.Cloud.Storage.V1 NuGet package must be installed in your application to use the previous code example.