Upload a File Directly to S3 Using Multi-Part Chunking

Use Filestack's brand new upload API (the same used in the picker) to upload files without the picker interface.

Please Note: The upload function will not work without an API key. To initialize the client use filestack.init("yourApiKey"). Filestack's documentation examples include a key in the background, but if you want to test something using your own key, you can always add var client = filestack.init("yourApiKey"); to the live code examples.

Syntax

The javascript upload function can be called at anytime to upload a file once the client has been initialized. You may pass in an optional dictionary of key-value pairs to customize the behavior of the upload.

Note: Security policies and signatures should be included as options when the client is initialized with your API key if your account has security enabled.

Note: Version 0.7.0 is the latest release of the v3 library. If you are on an older release version there may be breaking changes. Please read our v3 Changelog if you have any concerns.

<script src="https://static.filestackapi.com/v3/filestack-0.8.1.js"></script>
<script type="text/javascript">
  var client = filestack.init('yourApiKey', { policy: 'policy', signature: 'signature' });
  client.upload(file, uploadOptions, storeOptions, token);
</script>

Example Upload Code - Store a PNG from an input field

Use a standard input field and then upload the selected file object
var log = function(result) { console.log(JSON.stringify(result)) } var input = document.getElementById("store-input"); if (!input.value) { console.log("Choose a png to store to S3"); } else { client.upload(input.files[0]).then(log) }

Parameters

Client Initialization Options
An optional dictionary of key-value pairs that influence the Filestack client.
Security
Object
{ policy: POLICY, signature: SIGNATURE }

If you have security enabled, you will need to initialize the client with 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

file
the File to store
file
File or Blob
blob

Must be a valid File or Blob.

uploadOptions
An optional dictionary of key-value pairs that specify how Filestack uploads files.
Part Size
Integer
partSize: 6 * 1024 * 1024

Size of each uploaded part in bytes. The default part size is 6Mb.

Max Concurrent Uploads
Integer
concurrency: 5

Max number of parts the client should try to upload at one time.

Retry
Integer
retry: 10

Number of times to retry a failed part.

Progress Interval
Integer
progressInterval: 1000

Frequency (in milliseconds) at which progress events are fired.

onProgress
progressCallback
onProgress(event)

Called regularly to give progress updates. Returns an object with the following:

totalPercent An integer which represents the percent of total file upload progress.
totalBytes An integer which is the total number of bytes uploaded thus far across all parts.
onRetry
retryCallback
onRetry(retry)

Called when a retry is initiated. Returns an object with the following:

location A string that contains which part of the flow is being retried.
parts An array of objects that are the current parts at this point in the flow.
filename A string which is the name of the file being uploaded.
attempt The current retry attempt as an integer.
storeOptions
An optional dictionary of key-value pairs that specify how Filestack stores files.
Filename
String
filename: 'MyCoolPhoto.png'

The name of the file as it will be stored. Define a custom filename for the Blob/File being uploaded.

Location
String
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: Rackspace, Azure, Dropbox and Google Cloud are only available on the Grow and higher plans.

Path
String
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.

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.

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

token
An optional control token that can be used to call cancel(), pause(), and resume().
Pause
object
token.pause();

Can be called to pause the current flow.

Resume
object
token.resume();

Can be called to resume the current flow.

Cancel
object
token.cancel();

Can be called to cancel the current flow.