Extension dropbox

Typescript ❤️

A an atlassian editor extension to add a native dropbox picker

Install
yarn add @atlaskit/editor-extension-dropbox
Source
Bundle
Changelog
Latest

0.5.3

Patch Changes

  • Updated dependencies

This plugin is designed to make it easy to add a dropbox experience to a product. It uses dropbox's native picker within a modal, and rendering a smart link on the page after it is used.

To test how the plugin works, check out the extension tester, where you can use the /dropbox action to check it.

Installation

There are two parts to installing the dropbox extension: getting the plugin to run, and setting up your own dropbox app.

Installing the app

First, we assume you already have the editor set up - these are simply instructions on adding the extension.

Install the extension package:

yarn add @atlaskit/editor-extension-dropbox

Second, you need to add the extension to your editor.

import dropboxPluginManifest from "@atlaskit/editor-extension-dropbox" pluginPlace: [dropboxPluginManifest('KEY_TO_THE_KINGDOM')]

where the key to the KEY_TO_THE_KINGDOM is the key of your dropbox app.

Setting up your dropbox app

The plugin is designed to work with a dropbox app. This means that the maintainer needs access to dropbox. See using dropbox at atlassian for information on how to get the necessary permissions.

Once you have access, from dropbox home, click the ellipses at the bottom right of the page, and select 'developers' from the options available. Finally, clikc on 'app console' at the top right of the page, and you will be presented with the 'create app' button.

On the next screen, select Dropbox API over Dropbox Business API, and select Full Dropbox fo the permissions type.

You should now have your app key for the above setup step, however there are still two more things you need to do before your app will be usable.

In the dropbox form, you will need to add the domains you wish the plugin to run on to the Chooser/Saver domains

Final important step

Without this step, your extension will not render

As we are mounting the dropbox picker in an iframe, dropbox needs to whitelist the domains on which it will run. You will need to contact Anthony Marnell, or reach out to dropbox in the slack channel ext-dropbox-jira to dropbox directly. It may take a few days to get the domains whitelisted for your app.

In addition to this, you need to make sure your security permissions for X-Frame-Options and a Content-Security-Policy, otherwise dropbox will deny permissiones for the app.

You should likely set up two apps, one for local testing, and one for production - make sure each has its needed domains allowed.