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

Setting up a Custom S3 Source

The custom source feature allows a user to add their S3 storage bucket as a source to pick from in the side panel.

  1. In the developer portal, click on S3 Source under Credentials.
    Go to the S3 Source section under credentials in the Filestack developer portal
  2. Check the checkbox to enable the S3 Source feature.
  3. Enter the S3 Source Name, this is the name that will appear in the Filestack dialog side panel.
  4. Enter the S3 Access Key ID and Secret Access Key from your S3 account.
  5. Enter the name of the default S3 bucket users will be able to access.
  6. (Optional) Enter a sub-folder of the default bucket to restrict users to.
  7. Now log into your AWS account and go to the S3 console. In the S3 console, under the default bucket's properties, set a new rule in the permissions section.
    • The Grantee should be "Everyone".
    • Check off "List" to allow users to pick from the bucket.
    • Check off "Upload/Delete" if users should be able to add or remove files.
  8. Change the settings of your S3 Bucket to match the information above
  9. Add 'CUSTOMSOURCE' to the services parameter in your picker options and test to make sure your S3 Source shows up in your Filestack.
    add CUSTOMSOURCE to your Filestack services picker option
  10. Success!!!

Just add 'CUSTOMSOURCE' to the services parameter of your picker options after going through the steps above.

Sample Code
filepicker.pick( { mimetypes: ['*/*'], container: 'modal', services:['CUSTOMSOURCE'], }, function(Blob){ console.log(replaceHtmlChars(JSON.stringify(Blob))); }, function(FPError){ // console.log(FPError.toString()); - print errors to console } );

There are some picker option parameters that are specific to the S3 custom source. They allow you to choose the S3 bucket and path to display to customers on the fly.

S3 Custom Source Container

{customSourceContainer: 'mybucket'}

Specify the name of the S3 bucket to be used for your S3 Custom Source Client. This will override the default bucket set in your developer portal.

S3 Custom Source Path

{customSourcePath: 'some_folder/another_folder'}

Set the folder/path in the S3 bucket to use as the root path in your S3 Custom Source Client. This will override the default path set in your developer portal.