Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Google Drive integration

Guide for setting up Tiny Drive with Google Drive.

Contribute to this page

Overview

Tiny Drive enables you to import files from any Google Drive account if you setup the google drive integration by providing Google credentials. When the user selects a file from Google Drive, it will instantly be uploaded or imported into the Tiny Drive storage so that it can be viewed online and shared through Tiny Drive. Documents picked from Google Drive will be converted to PDF Files within Tiny Drive.

Prerequisites

  1. A valid Google Drive user account is required for integrating Google Drive with Tiny Drive. Refer to this Google Drive link for more information on creating a Google Drive user account.
  2. The Google Drive API should be enabled. Refer to this Google Drive link for more information on enabling the Google Drive API.
  3. The Google Picker API should be enabled. Refer to this Google Drive link for more information on enabling the Google Picker API.

Obtaining the API Key and Client ID

You can obtain the Google Drive credentials by following the steps below.

1. Create the Google API Key

  1. Open the Google Console Credentials page
  2. Click on the Create credentials button.
  3. Click on the API key item.

2. Copy the new Google API Key

Copy the generated Google API key this will later be used to configure Tiny Drive:

3. Create the OAuth client ID

Click on the Create credentials button then on OAuth client ID item:

4. Fill in the OAuth details

  1. Select Web application from Application type
  2. Add your domains to Authorized JavaScript origins.
  3. Click create.
  4. Copy the created client id it will be used later to configure Tiny Drive.

5. Restrict Client ID API access

  1. Click the edit icons for the Client ID you created
  2. Click on the API restrictions tab
  3. Click on the Select API dropdown
  4. Select Google Picker API from the dropdown
  5. Click Save

6. Configure tinydrive to use the new Google Drive credentials

The Google Drive API key can be configured by setting the tinydrive_google_drive_key. The Google OAuth client ID can be configured by setting the tinydrive_google_drive_client_id.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  tinydrive_google_drive_key: '<your google api key>',
  tinydrive_google_drive_client_id: '<your google drive OAuth client ID>'
});

For more information on other Tiny Drive config options refer to the configuration section of this document.

7. Tiny Drive UI

  1. From the TinyMCE user interface, click on the Insert/edit image button to access the Tiny Drive user interface.
  2. Click on the Upload/Create button to select Google Drive from the list of storages.
  3. Select the file to upload/import from Google Drive by clicking on the radio button next to it. Alternatively, to directly insert the file into the editor, double-click on it.
  4. Choose Save to upload/import the selected file/files to Tiny Drive.

Result: You should be able to view the selected files in your Tiny Drive storage.

Other file options

The following other options can be performed to the selected file :

  1. Follow the steps from 1-3 of the Tiny Drive UI procedure.
  2. Choose from the options below as per the requirement:
    • Choose Star to flag important files and view the starred file under the Star tab in the Google Drive Home tab.
    • Choose Download to download the selected file/files.
    • Choose Delete to remove the selected file/files from the Google Drive.

Read more about these options here.

Interactive example

Here is an interactive example of Google Drive enabled on Tiny Drive.

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.