Dropbox Storage

Filestack can also be configured to store files directly into your Dropbox account. This storage option requires a custom plan.

To begin configuring storage to your own Dropbox application you will need admin access to Dropbox and to your Filestack Developer Portal

Dropbox Storage Configuration

To start storing your uploads to Dropbox:

1. Go to https://www.dropbox.com/developers and click the center square labeled Create your App

Screenshot showing the Dropbox developers home screen

2. Select the radio button for Dropbox API. Choose Full Dropbox access. Name your application. Click Create App in the lower righthand corner.

Screenshot showing the Dropbox app permissions

3. On the settings tab, click the button to enable additional users.

Copy both your App key and App secret to add them to your Filestack Developer Portal later.

Add the following two redirect URIs to the section labeled OAuth 2

  • https://www.filestackapi.com/api/client/dropbox/authCallback/open
  • https://www.filestackapi.com/api/client/dropbox/authCallback/saveas

Screenshot showing the required redirects for Dropbox and Filestack

4. Login to your Filestack Developer Portal. Find Dropbox Auth in the sidebar. Enter your App Key and App Secret from Dropbox

Screenshot showing placement of Dropbox keys in Filestack Developler Portal

5. Navigate to the Dropbox section under storage. Click Choose new Folder.

You will authenticate into Dropbox and select the folder that you wish to store your Filestack uploads in.

After the Dropbox window closes, click Test Dropbox settings in the developer portal.

Screenshot showing folder setup for Dropbox in Filestack Developler Portal

6. Finally you’ll need to configure your picker code to store to Dropbox. To do this, set the location in the storeTo parameter.

Storing to Dropbox Storage using the Javascript API

You can store your files to Storage with the client.pick Javascript API method.

client.pick({
  storeTo: {
    location: 'dropbox',
    path: '/myfiles/1234.png',
  }
}).then(result => {
  console.log(JSON.stringify(result.filesUploaded))
})

Dropbox Storage Options for Javascript API

storeTo Object

storeTo: { parameter: value }

Accepts an optional dictionary of key-value pairs that specify how the picker should store files once they are selected for upload.

Location String

storeTo: { location: 'dropbox' }

Where to store the file. The default is s3. Other options are 'azure', 'dropbox', 'rackspace' and 'gcs'. You must have configured your storage in the developer portal to enable this feature.

Note: Azure, Dropbox and Google Cloud are only available on custom plans.

Path String

storeTo: { path: '/myfiles/1234.png' }

The path to store the file at within the specified file store. For S3, this is the key where the file will be stored at. By default, Filestack stores the file at the root at a unique id, followed by an underscore, followed by the filename, for example '3AB239102DB_myphoto.png'.

If the provided path ends in a '/', it will be treated as a folder, so if the provided path is 'myfiles/' and the uploaded file is named 'myphoto.png', the file will be stored at 'myfiles/909DFAC9CB12_myphoto.png', for example.

Important: If the maxFiles parameter is greater than one, be sure to only use paths that end in '/' or else all uploaded files will be written to the same object in your bucket. In other words, the files will overwrite each other.