Dropbox integration

Overview

Tiny Drive enables you to import files from any Dropbox account if you set up the Dropbox integration by providing a Dropbox app key. When the user selects a file from Dropbox, it will instantly be uploaded or imported into the Tiny Drive storage so that it can be viewed online and shared through Tiny Drive.

Prerequisites

A valid Dropbox user account is required for integrating Dropbox with Tiny Drive. Refer to this link for more information on creating a Dropbox user account.

Obtaining the Dropbox app key

You can get Dropbox integration up and running by following the steps below.

1. Create the application

Open the Create app page.
Select the Dropbox API from Choose an API.
Select Full Dropbox from the Choose the type of access you need.
Name your app with something company unique acmeinc-tinydrive for example.

2. Get the Dropbox app key and add domains

Copy the key from App key this will then be used as the key for the tinydrive_dropbox_app_key.
Configure the domains that are serving your application in Chooser/Saver domains.

3. Configure tinydrive to use the new Dropbox app key

You configure the Dropbox API key by setting the tinydrive_dropbox_app_key like in the example below.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  tinydrive_dropbox_app_key: '<your dropbox app key>'
});

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

4. Tiny Drive UI

From the TinyMCE user interface, click on the button to access the Tiny Drive user interface.
Click on the button to select Dropbox from the list of storages.
Select the file to upload/import from Dropbox by clicking on the radio button next to it and click the Choose button to upload or Cancel to abort the operation.
Alternatively, files from your local browser can be uploaded to the Dropbox by clicking on the Upload files option and selecting the files to upload.

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

Read about other Dropbox options here.

Interactive example

Here is an interactive example of Dropbox-enabled on Tiny Drive.

TinyMCE
HTML
JS

<h2>The world's first rich text editor in the cloud</h2>

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.

One of these enhancements is Tiny Drive: 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.

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

Here are some of our customer's most common use cases for TinyMCE:

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

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 – no credit card required!

<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_dropbox_app_key: 'YOUR_DROPBOX_APP_KEY'
});