Open document from Google Drive

8 Jan 20247 minutes to read

To load a document from Google Drive in a 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 Document Editor Sample in React

Start by following the steps provided in this link to create a simple Document Editor sample in react. This will give you a basic setup of the Document 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 part 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 Document Editor sample

In the client-side, the document is returned from the web service is opening using open method.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorContainerComponent, Toolbar
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
    let container: DocumentEditorContainerComponent;

function load(): void {
    fetch(
  'http://localhost:62870/api/documenteditor/LoadFromGoogleDrive',
  {
      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 => {
    container.documentEditor.open(JSON.stringify(json));
  })
  .catch(error => {
      console.error(error);
  });
}
    return (
        <div>
            <button onClick={load}>Open Document From Google Drive</button>
            <DocumentEditorContainerComponent id="container" ref={(scope) => { container = scope; }}
                height={'590px'}
                serviceUrl="http://localhost:62870/api/documenteditor/"
                enableToolbar={true}
            />
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

NOTE

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