Dropbox Integration

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

All file types are selectable. This includes audio, video, image, text, office, and compressed archive files.

Section Quick Jump:

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 from 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(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( 'https://www.filestackapi.com/api/file/qHi4LxRh28IeEBdJcFpw', { 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 application and that you enter your Dropbox application's API keys in your Filestack Developer Portal.

Setting up a Custom Dropbox oauth application


  1. Go to https://www.dropbox.com/login
  2. Login to the Dropbox account you would like to associate Filestack with.
  3. On https://www.dropbox.com/developers click My Apps
  4. Click “Create App”.
    Click Create App on the dropbox page
  5. Select the Dropbox API
  6. Select Full Dropbox
  7. Name your App, and Click “Create App”
    Name the application, make sure the proper setting are selected and click create
  8. On the next page, it will show the newly created app with an App key and App secret. The permission type should be Full Dropbox. Important! Once everything is working as expected, be sure to click the "Enable Additional Users" and then the “Apply for Production” button to have your app approved by Dropbox and enable up to 100 users while you wait for approval.
    Confirm that the permission type is correct. Apply for production and Enable Additional Users.
  9. Navigate to the Developer Portal in Filestack and under the Credentials Section, click Dropbox Auth.
  10. Check the checkbox and copy and paste the App key and App secret into the corresponding fields. Click Save.
    Add the Dropbox App Key and App Secret to the developer portal

Congratulations! You have successfully connected Filestack with Dropbox using oauth.

Dropbox Webhooks for Your Application

Dropbox Webhooks serve the purpose of notifying users about events that occur in relation to their Filestack account. In your developer portal, you can set one or many urls whose purpose is to receive the messages triggered by specific Filestack events.

These are the three event types that will send messages to your webhook url(s) concerning Dropbox:

  • Dropbox File Uploads
  • Dropbox File Exports
  • Dropbox File Conversions

Configuring Dropbox Webhooks

Filestack Webhooks are configured in the developer portal under Credentials > Webhooks. If you enter your url and select "All", then one entry will be made for each type of Filestack Webhook Event, including the ones for Dropbox. To learn more about configuring and receiving webhooks please visit our main webhooks documentation page.

Receiving a Dropbox Webhook Notification

Configuring your server to receive a new webhook is the same as creating any page on your website. If you are using Sinatra, add a new route with the desired URL. In PHP you could create a new .php file on your server. It doesn't need to be complicated. With webhooks, your server is the server receiving the request. You can even use an external service such as RequestBin as shown in the screenshot above.

Webhook data is sent as JSON in the request's body. The full event details are included and can be used directly. The "action" in the JSON is the type of Filestack event that happened, be it a file being uploaded, or simply the Filestack dialog opening.

Filestack will retry sending a webhook 3 times if the first attempt fails. The second attempt to deliver a webhook happens 5 minutes after the first attempt, the third attempt happens after 1 hour, and the final attempt to deliver a webhook happens 12 hours after the first attempt.

Note that for file uploads, both symlinks and files copied with pickAndStore, the "client" field shows the service used.

For conversions, the "provider" shows where the file resides. If the file was stored to Filestack's storage, the provider will be "internal", otherwise it could be "amazon" if the original was stored to S3, or one of the cloud drives Filestack connects to, such as "Dropbox" if the link to the file was a symlink.

The following are examples of what the Dropbox specific webhook messages include and look like:

  1. File Upload (symlink):

  2. {  
       "action":"fp.upload",
       "timestamp":1443444905,
       "id":100946,
       "text":{  
          "url":"https://www.filestackapi.com/api/file/WAunDTTqQfCNWwUUyf6n",
          "client":"Dropbox",
          "type":"image/jpeg",
          "filename":"1579337399020824.jpg",
          "size":139154
       }
    }

  3. File Upload (with store):

  4. {
       "action":"fp.upload",
       "timestamp":1443515345,
       "id":105258,
       "text":{
          "container":"kg_bucket",
          "url":"https://www.filestackapi.com/api/file/0CpUz9H4QfaX7LwwsgUf",
          "filename":"Cat_crying_Lolcat.jpg",
          "client":"Dropbox",
          "key":"EqACdfNRmylz2h1SSYwT_Cat_crying_Lolcat.jpg",
          "type":"image/jpeg",
          "size":205354
       }
    }

  5. File Export (save to):

  6. {
      "action": "fp.export",
      "timestamp": 1444257665, 
      "id": 142447, 
      "text":{
        "source": "https://www.filestackapi.com/api/file/qHi4LxRh28IeEBdJcFpw",
        "client": "Dropbox",
        "filename": "newFiletest.jpg",
        "created": "https://www.filestackapi.com/api/file/s40jJOQDGVr2T86cgOAe"
      }
    }
            

  7. File Conversion:

  8. {
       "action":"fp.converse",
       "timestamp":1435586806,
       "text":{
          "url":"https://www.filestackapi.com/api/file/uydUKAcTSsWB3g5HOsB4/convert?w=102",
          "link":{
             "writeable":true,
             "mimetype":"image/jpeg",
             "handle":"uydUKAcTSsWB3g5HOsB4",
             "url":"filepicker_upload_persist/pHSrbCRqSqeR1wh8USfY_1.jpeg",
             "created_at":"2015-06-29T13:31:02.204Z",
             "provider":"Dropbox",
             "app_id":7876,
             "filename":"1.jpeg",
             "mongo_id":null,
             "_metadata":null,
             "access_tokens":[
    
             ],
             "is_folder":false,
             "persist":false,
             "user_id":null,
             "id":31968,
             "size":"111175"
          }
       },
       "id":109
    }