---
title: "Dropbox integration"
description: "Guide for setting up Tiny Drive with Dropbox."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/tinydrive-dropbox-integration/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/tinydrive-dropbox-integration/index.md"
version: "latest"
last_updated: "2024-06-05T03:57:50Z"
tokens: 724
---
# 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](https://help.dropbox.com/account/create-account) 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

1. Open the [Create app](https://www.dropbox.com/developers/apps/create) page.
2. Select the `Dropbox API` from `Choose an API`.
3. Select `Full Dropbox` from the `Choose the type of access you need`.
4. Name your app with something company unique `acmeinc-tinydrive` for example.

### 2. Get the Dropbox app key and add domains

1. Copy the key from `App key` this will then be used as the key for the [tinydrive_dropbox_app_key](../tinydrive-dropbox-and-google-drive/#tinydrive_dropbox_app_key).
2. 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](../tinydrive-dropbox-and-google-drive/#tinydrive_dropbox_app_key) like in the example below.

```js
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](../tinydrive-dropbox-and-google-drive/#configuring-with-dropbox) section of this document.

### 4. Tiny Drive UI

1. From the TinyMCE user interface, click on the

![Insert/edit image](../_images/insertimage.png)
button to access the Tiny Drive user interface.
2. Click on the

![Upload/Create](../_images/upload.png)
button to select Dropbox from the list of storages.
3. Select the file to upload/import from Dropbox by clicking on the checkbox next to it and click the **Choose** button to upload or **Cancel** to abort the operation.
4. 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](https://www.dropbox.com/guide/business).

## Interactive example

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

**Example**

```js
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'
});
```