Getting Started

Filestack Architecture

File Upload

File Export (Save To)

Responsive Images

Image Transformations

Document Transformations

Video Transcoding

Audio Transcoding





Filestack Viewer


Supported Cloud Drives

Filestack Recipes

Filestack Integrations

Filestack SDKs

Register for an API key

Dropbox Integration

Touting a user base of over 200 million users, Dropbox offers cloud storage, file syncronization, file sharing and mobile backup services. Built with Python and Go and utilizing Amazon's S3 storage, Dropbox offers a number of desktop and mobile clients. Dropbox even offers an email client in Mailbox. Filestack not only offers the ability to easily pick files from Dropbox, but to store files to Dropbox as well. See what Dropbox has to offer with Filestack.

Current Worldwide Users: 200,000,000

Uploads from the Dropbox API support the following types of files:

Users can select files from Dropbox that match these broad file type categories: All file types are selectable. This includes audio, video, image, text, office, and compressed archive files.

API OAUTH Webhooks

Using the Dropbox API

  1. User selects Dropbox from services list
  2. user authenticates connection by logging into Dropbox account
  3. user is connected and can select files from Dropbox in Filestack dialog

Dropbox api upload widget

Upload to Dropbox

Uploading or "picking" a file from Dropbox in the context of Filestack means choosing a file and creating a distributable link to that file where it exists in Dropbox. This is the Filestack URL that all "Pick" functions return. If you are using the pickAndStore method, then the file from Dropbox is copied to a new storage location.

Sample Upload Code
filepicker.pick( { mimetypes: ['*/*'], services:['DROPBOX'], }, function(Blob){ console.log(replaceHtmlChars(JSON.stringify(Blob))); } );

Download to Dropbox

Exporting a file to Dropbox in the context of Filestack means saving a file from a url or Filestack Blob object to Dropbox and creating a distributable link to that file where it exists in Dropbox. This is the Filestack URL that the "export" function returns.

Sample Export Code
filepicker.exportFile( '', { mimetype:'*/*', suggestedFilename: 'newFile', services: ['DROPBOX'] }, function(Blob){ console.log(Blob.url); } );

Sample Image Conversion Code for Dropbox

If you have a Filestack Blob object or Filestack URL, then you can use the Filestack REST or Javascript APIs to convert office documents and image files. In the sample code below we "pick" an image file from Dropbox and use the Javascript API convert method to resize the image to 400w by 400h in pixels.

Sample Conversion Code
filepicker.pick( { services: ['DROPBOX'], mimetype: 'image/*', }, function(pickedBlob){ console.log("Conversion in progress...") filepicker.convert( pickedBlob, { width: 400, height: 400, }, { location: 'S3' }, function(convertedBlob){ console.log("Converted file url: ", convertedBlob.url); console.log("File is stored under your S3: ", convertedBlob.key); filepicker.remove( pickedBlob, function(){ console.log("Removed"); } ); } ); } );

Combining Filestack Functions for Dropbox

Now let's combine these methods and see what you can achieve with Filestack and Dropbox! Here we pick an image from Dropbox, crop and resize it, then save it back into Dropbox.

Sample Multi-Function Code
filepicker.pick( { services: ['DROPBOX'], mimetype: 'image/*', }, function (Blob) { filepicker.convert( Blob, { width: 300, height: 300, crop_first: true }, function (converted_Blob) { filepicker.exportFile(converted_Blob.url, { services: ['DROPBOX'], mimetype: Blob.mimetype, suggestedFilename: 'converted_' + Blob.filename }, function (exported_Blob) { console.log('File successfully saved!'); }); }); });

Create your own Dropbox OAuth application to Connect to Filestack:

In order to use Dropbox with Filestack, we require that you have your own custom Dropbox OAuth application and that you enter your Dropbox application's API keys in your Filestack Developer Portal. Click here to learn How to create a Dropbox OAuth Application.

Dropbox Webhooks for Your Application

You can be notified about all file uploads and conversions from all cloud services Filestack connects to. This includes Dropbox. Follow this link to find out more about how to use Filestack's Dropbox webhooks.

Here are some examples of the webhooks for uploads from Dropbox:

File Upload (symlink):

File Upload (with store):

File Export (save to):
  "action": "fp.export",
  "timestamp": 1444257665,
  "id": 142447,
    "source": "",
    "client": "DROPBOX",
    "filename": "newFiletest.jpg",
    "created": ""