Store a File - Store the File Contained in a Filestack Blob or the Subject of a File Input Field

Save files directly to your S3 bucket (or other storage). This works for both Blobs from a filepicker.pick call or for DOM File objects from an <input type="file"/>

Please Note: The parameter that specifies the bucket to store files in when using the filepicker.store method is container and not storeContainer like in filepicker.pickAndStore.

Syntax

<script src="https://api.filestackapi.com/filestack.js"></script>
<script type="text/javascript">
  filepicker.setKey("your_API_KEY");
  filepicker.store(input, {options}, onSuccess(Blob){}, onError(FPError){}, onProgress(percent){});
</script>

Example Store Code - Store a Filestack Blob with a different filename

Store the contents of a blob and change the filename
var blob = { url: 'https://www.filestackapi.com/api/file/AMltoa8ATECOsFTMduLz', filename: 'hello.txt', mimetype: 'text/plain', isWriteable: true, size: 100 }; console.log("Storing", blob.filename); filepicker.store( blob, {filename: 'myCoolFile.txt'}, function(new_blob){ console.log(JSON.stringify(new_blob)); } );

Example Store Code - Store a PNG from an input field

Use a standard input field and then store the selected file object
var input = document.getElementById("store-input"); if (!input.value) { console.log("Choose a png to store to S3"); } else { filepicker.store( input, function(Blob){ console.log("Store successful:", JSON.stringify(Blob)); }, function(FPError) { // console.log(FPError.toString()); - print errors to console }, function(progress) { console.log("Loading: "+progress+"%"); } ); }

Parameters

input
the file to store
Input
Blob
{input}

The data to store, or an object that holds the data. Can be raw data, a Blob, a DOM File Object, or an <input type="file"/>

options
An optional dictionary of key-value pairs that configure how to store the data.
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.

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.

Security
String
{policy: POLICY, signature: SIGNATURE}

If you have security enabled, you'll need to have a valid Filestack.io 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

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

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

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

onSuccess
The function to call if a file is picked successfully.

We'll return a Blob as a JSON object with the following properties.

url The main Filestack file url on which all other operations are based.
filename The filename of the uploaded file.
mimetype The mimetype of the uploaded file.
size The size of the uploaded file in bytes, if available.
isWriteable Whether the file can be written to using filepicker.write.

Sample response

{
    "url":"https://cdn.filestackcontent.com/Knu33RNOQ6qi0S5ND1mY",
    "filename":"calvinhobbes2.jpg",
    "mimetype":"image/jpeg",
    "size":71644,
    "cropped":{
      "originalImageSize":[720,540],
      "cropArea":{"position":[0,0],"size":[720,540]}
    },
    "converted":true,
    "id":1,
    "client":"computer",
    "isWriteable":true
}
onProgress
The function that is called on uploading progress events. The function will show the percent completed as a number out of 100. Multiple mode provides separate callbacks for all selected files.

We'll retrun a JSON object with the following properties:

progress Current progress as a float number.
filename The filename of the file being uploaded.
mimetype The mimetype of the file being uploaded.
size The size of the file being uploaded in bytes if available.

Sample response

{
    "progress":57.63,
    "filename":"file.jpg",
    "mimetype":"image/jpeg",
    "size":3300503
}
onError
The function to call if there is an error when picking a file.

Possible error codes on the FPError:

111 Your browser doesn't support reading from DOM File objects
112 Your browser doesn't support reading from different domains
113 The website of the URL you provided does not allow other domains to read data
114 The website of the URL you provided had an error
115 File not found
118 General read error
121 The Blob to write to could not be found
122 The Remote URL could not be reached
151 The file store couldn't be reached
400 Bad parameters were passed to the server. This often will be the case when you turned on security but haven't passed up a policy or signature.
403 Invalid request - The policy and/or signature don't allow you to make this request. For more information see Security Documentation.

For more info about FPErrors, see Error Handling.

Sample response

{"code":101}