Google Drive integration

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_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  tinydrive_google_drive_key: '<your google api key>',
  tinydrive_google_drive_client_id: '<your google drive OAuth client ID>'
});

For 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 checkbox 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.

  • TinyMCE

  • HTML

  • JS

<textarea id="drive-demo">
  <h2>The world's first rich text editor in the cloud</h2>

  <p>
    Have you heard about Tiny Cloud? It's the first step in our journey to help you deliver great content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global Content Delivery Network, image proxy services and auto updates to the TinyMCE editor. They're also ready for some exciting updates coming soon.
  </p>

  <p>
    One of these enhancements is <strong>Tiny Drive</strong>: imagine file management for TinyMCE, in the cloud, made super easy. Learn more at <a href="https://www.tiny.cloud/docs/tinymce/6/tinydrive-introduction/#interactive-example">our working demo</a>, where you'll find an opportunity to provide feedback to the product team.
  </p>

  <h3>An editor for every project</h3>

  <p>
    Here are some of our customer's most common use cases for TinyMCE:
  </p>

  <ul>
    <li>Content Management Systems (<em>WordPress, Umbraco</em>)</li>
    <li>Learning Management Systems (<em>Blackboard</em>)</li>
    <li>Customer Relationship Management and marketing automation (<em>Marketo</em>)</li>
    <li>Email marketing (<em>Constant Contact</em>)</li>
    <li>Content creation in SaaS systems (<em>Eventbrite, Evernote, GoFundMe, Zendesk</em>)</li>
  </ul>

  <p>&nbsp;</p>

  <p>
    And those use cases are just the start. TinyMCE is incredibly flexible, and with hundreds of APIs there's likely a solution for your editor project. If you haven't experienced Tiny Cloud, get started today. You'll even get a free premium plugin trial &ndash; no credit card required!
  </p>
</textarea>
tinymce.init({
  selector: 'textarea#drive-demo',
  plugins: 'image media link tinydrive code editimage',
  height: 600,
  toolbar: 'insertfile image link | code',
  tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  tinydrive_google_drive_key: 'YOUR_GOOGLE_DRIVE_KEY',
  tinydrive_google_drive_client_id: 'YOUR_GOOGLE_DRIVE_CLIENT_ID'
});