Dropbox Storage

Filestack can also be configured to store users' files directly into your Dropbox account. To do this click the Dropbox Auth link in your developer portal under Storage.

You will need to specify the Dropbox API Keys for your Dropbox application.

Dropbox Storage Configuration

  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”.
  5. Select the Dropbox API
  6. Select Full Dropbox
  7. Name your App, and Click “Create App”
  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.
    You must set the following redirect uris for your application:
    • https://www.filestackapi.com/api/client/dropbox/authCallback/open
    • https://www.filestackapi.com/api/client/dropbox/authCallback/saveas
    Important! Once everything is working as expected, be sure to click the "Enable Additional Users" button 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.
  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.
  11. Now in the Storage section of the developer portal, click on Dropbox in the left hand menu. On this page use the choose folder button to select a Dropbox folder to store files in with Filestack, and then use the Test Dropbox Settings button to make sure it works.

Congratulations, Dropbox storage for Filestack is now configured! You may now enter 'dropbox' as a value for the location storage options 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', } }).then(result => { console.log(JSON.stringify(result.filesUploaded)) })

Dropbox Storage Options for Javascript API

storeTo
An optional dictionary of key-value pairs that specify how the picker stores files.
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: Rackspace, Azure, Dropbox and Google Cloud are only available on the Grow and higher 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.

Container
String
storeTo: { container: 'user-photos' }

The bucket or container in the specified file store where the file should end up. This is especially useful if you have different containers for testing and production and you want to use them both on the same Filestack app. If this parameter is omitted, the file is stored in the default container specified in your developer portal.

Note: This parameter does not apply to the Dropbox file store.

Region
String
storeTo: { region: 'us-east-1' }

The region where your storage container is located. This setting currently applies only to S3 buckets. If you are using a different bucket and region than the one you set up in your developer portal you can pass the region as part of your store options. If this parameter is not set we will do our best to determine the region your S3 bucket is located so that we can properly authenticate our connection request. You can find a list of the S3 regions here: in the "region" column.

Public Access
String
storeTo: { access: 'public' }

Indicates that the file should be stored in a way that allows public access going directly to the underlying file store. For instance, if the file is stored on S3, this will allow the S3 url to be used directly. This has no impact on the ability of users to read from the Filestack file URL. Defaults to 'private'.

Dropbox Storage Options for REST API

Similar to the client.storeURL call in javascript, you can use the Filestack files library to send files directly to your dropbox bucket and get back a Blob for further operations. To do this, issue a POST to the /api/store/dropbox endpoint, along with your apikey, the file, and an optional set of parameters.

Store local file to dropbox:
Request:
>>> curl -X POST -F fileUpload=@filename.txt https://www.filestackapi.com/api/store/dropbox?key=MY_API_KEY
Result:
{"url": "https://www.filestackapi.com/api/file/HLOon3NcTS6w7rqyZ3ei", "size": 234, "type": "text/plain", "filename": "tester.txt", "key": "1ilWxmaRRqhMd2vSbSyB_tester.txt"}
Store URL to dropbox
Request:
>>> curl -X POST -d url="https://d3urzlae3olibs.cloudfront.net/watermark.png" https://www.filestackapi.com/api/store/dropbox?key=MY_API_KEY
Request:
{"url": "https://www.filestackapi.com/api/file/s7tdGfE5RRKFUxwsZoYv", "size": 8331, "type": "image/png", "filename": "watermark.png", "key": "a1RyBxiglW92bS2SRmqM_watermark.png"}
Store URL to dropbox and set parameters
Request:
>>> curl  -X POST  -d  url="https://d3urzlae3olibs.cloudfront.net/watermark.png"  "https://www.filestackapi.com/api/store/dropbox?key=AhTgLagciQByzXpFGRI0Az&path=/myfiles/1234.png&mimetype=image/png"
Request:
{"container": "custom_source", "url": "https://www.filestackapi.com/api/file/rLNF34IvRWybiNIATg4D", "filename": "watermark.png", "key": "myfiles/1234.png", "type": "image/png", "size": 8331}

The REST Store parameter names are exactly the same as the Javascript ones.

If you set additional parameters make sure that the URL is given in quotes.

syntax
https://www.filestackapi.com/api/store/dropbox?key=MY_API_KEY&[options]

These parameters can be appended to your URL, after your API key with the & symbol and parameter_name=

Filename
String
filename=MyCoolPhoto.png

The name of the file as it will be stored. If this isn't provided, we do the best we can to come up with one.

Path
String
path=/myfiles/1234.png

The path to store the file at within the specified file store. For dropbox, 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.

If the multiple option is set to true, only paths that end in '/' are allowed.

Mimetype
String
mimetype=text/html

The type of the file as it will be stored. If this isn't provided, we do the best we can, defaulting to "text/plain" if you give us raw data.

Base64 Decoding
Boolean
base64decode=true

Specify that you want the data to be first decoded from base64 before being written to the file. For example, if you have base64 encoded image data, you can use this flag to first decode the data before writing the image file.

Store Container
String
container=user-photos

The bucket or container in the specified file store where the file should end up. This is especially useful if you have different containers for testing and production and you want to use them both on the same Filestack app. If this parameter is omitted, the file is stored in the default container specified in your developer portal.

Note: This parameter does not apply to the Dropbox file store.

Store Region
String
storeRegion=us-east-1

The region where your storage container is located. This setting currently applies only to S3 buckets. If you are using a different bucket and region than the one you set up in your developer portal you can pass the storeRegion as part of your store options. If this parameter is not set we will do our best to determine the region your S3 bucket is located so that we can properly authenticate our connection request. You can find a list of the S3 regions here: in the "region" column.

Public Access
String
access=public

Indicates that the file should be stored in a way that allows public access going directly to the underlying file store. For instance, if the file is stored on dropbox, this will allow the dropbox url to be used directly. This has no impact on the ability of users to read from the Filestack file URL. Defaults to 'private'.

Security
String
policy=POLICY&signature=SIGNATURE

If you have security enabled, you'll need to have a valid Filestack policy and signature in order to perform the requested call. This allows you to select who can and cannot perform certain actions on your site. Read more about security and how to generate policies and signatures