Amazon S3 Storage

Filestack can be configured to store files directly into your Amazon S3 storage account. Direct to S3 is available to users with starter applications or custom plans.

You will need configure your Amazon S3 Access Key and Secret Access Key as well as the default bucket to use your developer portal under Storage.

Amazon S3 Storage Configuration

To start using your own S3:

1. Create a bucket in the S3 section of the AWS console: console.aws.amazon.com You can skip step 2 and 3 of the modal, and create the bucket on step 4.

Create bucket screen

2. If you are using the V3 version of the Filestack Picker, you will also need to set up some additional CORS rules for your bucket. You can do this from the Bucket Permissions Section of your new bucket by clicking the 'CORS Configuration' button.

CORS configuration screen

Specifically, your CORS configuration should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>ETag</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

3. Next use create a bucket policy that has read and write permissions and attach it to your IAM user or group:

Create policy screen
Review policy screen

Specifically, your IAM policy should look like this (replace YOUR_BUCKET_NAME with your bucket):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:GetObject",
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:DeleteObject",
                "s3:ListAllMyBuckets"
            ],
            "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
        }
    ]
}

4. Now you need to add your AWS keys to your developer portal. In your Filestack Developer Portal add your Amazon Access Key ID, Secret Access Key, Bucket Name and S3 Region. Hit test to verify that it all works.

Review policy screen

Congratulations! Amazon S3 is all set up. You may now enter 's3' as a value for the location and any additional storage options parameters you would like to include.

Note: Please Note: If you are a CIN or FII customer you will also need to follow one additional step

Storing to S3 Storage using the Javascript API

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

client.pick({
  storeTo: {
    location: 's3',
    path: '/myfiles/1234.png',
    container: 'my-files',
    region: 'us-east-1',
    access: 'public'
  }
}).then(result => {
  console.log(JSON.stringify(result.filesUploaded))
})

S3 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: 's3' }

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 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'.