Open Documents from Google Drive in TypeScript DOCX Editor

28 Aug 20269 minutes to read

To load a document from Google Drive in a TypeScript DOCX Editor (Document Editor), you can follow the steps below

Step 1: Set up Google Drive API

You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official link.

Step 2: Create a Simple DOCX Editor Sample in TypeScript

Follow the instructions provided in this link to create a simple DOCX Editor sample TypeScript. This will give you a basic setup of the DOCX Editor component.

Step 3: 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.Apis.Drive.v3;
using Google.Apis.Util.Store;
  • 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 folderId;
public readonly string applicationName;
public readonly string credentialPath;
private static readonly string[] Scopes = { DriveService.Scope.DriveFile, DriveService.Scope.DriveReadonly};

public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
{
  _hostingEnvironment = hostingEnvironment;
  _cache = cache;
  _configuration = configuration;
  folderId = _configuration.GetValue<string>("FolderId");
  credentialPath = _configuration.GetValue<string>("CredentialPath");
  applicationName = _configuration.GetValue<string>("ApplicationName");
}
  • Create the LoadFromGoogleDrive() method to load the document from Google Drive.
[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("LoadFromGoogleDrive")]
//Post action for Loading the documents
public async Task<string> LoadFromGoogleDrive([FromBody] Dictionary<string, string> jsonObject)
{

  MemoryStream stream = new MemoryStream();
  UserCredential credential;
  using (var stream1 = new FileStream(credentialPath, FileMode.Open, FileAccess.Read))
  {
    string credPath = "token.json";
    credential = await GoogleWebAuthorizationBroker.AuthorizeAsync(
      GoogleClientSecrets.Load(stream1).Secrets,
      Scopes,
      "user",
      CancellationToken.None,
      new FileDataStore(credPath, true));
  }

  // Create Google Drive API service.
  var service = new DriveService(new BaseClientService.Initializer()
  {
    HttpClientInitializer = credential,
    ApplicationName = applicationName,
  });
  // List DOCX files in Google Drive
  listRequest.Q = "mimeType='application/vnd.openxmlformats-officedocument.wordprocessingml.document' and '" + folderId + "' in parents and trashed=false";
  listRequest.Fields = "files(id, name)";
  var files = await listRequest.ExecuteAsync();
  string fileIdToDownload = string.Empty;
  foreach (var file in files.Files)
  { 
    string fileId = file.Id;
    string fileName = file.Name;
    if (fileName == objectName)
    {
      // Save the matching fileId
      fileIdToDownload = fileId;
      break;
    }
  }
  string fileIds = fileIdToDownload;
  var request = service.Files.Get(fileIds);
  await request.DownloadAsync(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": "*",
  "FolderId": "Your Google Drive Folder ID",
  "CredentialPath": "Your Path to the OAuth 2.0 Client IDs json file",
  "ApplicationName": "Your Application name"
}

NOTE

Replace Your Google Drive Folder ID, Your Application name, and Your Path to the OAuth 2.0 Client IDs json file with your actual Google Drive folder ID, your name for your application, and the path for the JSON file.

NOTE

The FolderId is the unique identifier for the folder. For example, if your folder URL is: https://drive.google.com/drive/folders/abc123xyz456, then the folder ID is abc123xyz456.

Step 4: Modify the index file in the DOCX Editor sample

On the client side, the document returned from the web service is opened using the open method.

import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';

// Inject require modules.
DocumentEditorContainer.Inject(Toolbar);

//Initialize Document Editor component
let documentEditorContainer: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', serviceUrl: 'http://localhost:62870/api/documenteditor/' });

// Render Document Editor component.
documentEditorContainer.appendTo('#DocumentEditor');

document.getElementById('load').addEventListener('click', (): void => {
  load();
});

function load(): void {
  fetch(
    'http://localhost:62870/api/documenteditor/LoadFromBoxCloud',
    {
      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);
    });
} console.error(error);
  });
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</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" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div>
        <button id="load">Open Document From Box cloud file storage</button>
    </div>
    <div id="DocumentEditor"></div>
</body>

</html>

NOTE

The Google.Apis.Drive.v3 NuGet package must be installed in your application to use the previous code example.