Open document from Google Cloud Storage in Angular Document editor

22 Jun 20265 minutes to read

To load a document from Google Cloud Storage in a Angular DOCX Editor (Document Editor), you can follow the steps below

Step 1: Create a Simple Document Editor Sample in angular

Start by following the steps provided in this link to create a simple Document Editor sample in angular. 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"
}

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

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.

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  DocumentEditorContainerComponent,
  ToolbarService,
} from '@syncfusion/ej2-angular-documenteditor';
@Component({
      selector: 'app-root',
      // specifies the template string for the DocumentEditorContainer component
      template: `<button ejs-button (click)="load()" >Open Document From Google cloud storage</button><ejs-documenteditorcontainer #documenteditor_default serviceUrl="http://localhost:62870/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
      providers: [ToolbarService],
})
export class AppComponent implements OnInit {
  @ViewChild('documenteditor_default')
  public container: DocumentEditorContainerComponent;
  ngOnInit(): void {}
  public load(): void {
    let http: XMLHttpRequest = new XMLHttpRequest();
    //add the documentName in which you want to open document inside the documentName
    let content = { documentName: 'Getting Started.docx' };
    let baseurl: string = 'http://localhost:62870/api/documenteditor/LoadFromGoogleCloud';
    http.open('POST', baseurl, true);
    http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    http.onreadystatechange = () => {
      if (http.readyState === 4) {
        if (http.status === 200 || http.status === 304) {
          //open the SFDT text in Document Editor
          this.container.documentEditor.open(http.responseText);
        }
      }
    };
    http.send(JSON.stringify(content));
  }
}

The Google.Cloud.Storage.V1 NuGet package must be installed in your application to use the previous code example.