Upload a File

Upload a File to the storage of your choice with Filestack

The javascript upload function can be called at anytime to store a URL once the client has been initialized

You can add Filestack to your project quickly and easily using our CDN

Or by installing Filestack-JS using NPM

You will need to instantiate the client with your API key and security or CNAME if they apply to you.

You may pass in an optional dictionary of key-value pairs to customize the options of client.upload()

const client = filestack.init('Your_API_Key');
client.upload(file, uploadOptions, storeOptions, token);

Upload Options

An optional dictionary of key-value pairs that specify how the picker behaves.

File (Required) File, Blob, or Base64 string

'url_to_be_stored'

Must be a valid File, Blob, or base64 encoded string

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.

Progress Callback Function

onProgress(event)

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

  • totalPercentThe percent (as an integer) of the file that has been uploaded.
  • totalBytesAn integer stating the total number of bytes uploaded for this file.
Retry Callback Function

onRetry(retry)

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

  • locationA string that contains which part of the flow is being retried.
  • partsAn array of objects that are the current parts at this point in the flow.
  • filenameA string which is the name of the file being uploaded.
  • attemptThe current retry attempt as an integer.

Store Options

An optional dictionary of key-value pairs that specify how Filestack stores files.

Filename String

filename: 'MyFile.ext'

The name of the file as it will be stored. Define a custom filename for the Blob/File/Base64 String 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.

PathString

path: '/myfiles/1234.png'

The path to store the file 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'

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.

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

Tokens

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.

CancelObject

token.cancel();

Can be called to cancel the current flow.