Write a Blob Back to a File - Overwrite an existing Filestack Link with a New File using the

Once you generate a Filestack link via filepicker.pick or filepicker.store, you can write directly back to it.


<script type="text/javascript">
  filepicker.write(target, data, {options}, onSuccess(Blob){}, onError(FPError){}, onProgress(percent){});

Filestack has added an additional layer of security that will be required in order to perform an overwrite call. This change is detailed here.

Write requests will require a valid filestack policy and signature with the write permission. Details on creating and using Filestack policies and signatures can be found in the Security section of the documentation.

Security Documentation

Example Write Code - Re-write the contents of a file

Re-write the contents of a txt file with Filestack Rocks
/*Blob from a previous pick, etc.*/ var blob = { url: 'https://www.filestackapi.com/api/file/cAY50RzRi6qUpS0aoXl3', filename: 'rewrite_me.txt', mimetype: 'text/plain', isWriteable: true, size: 100 }; console.log("Writing to " + blob.filename + "..."); filepicker.write( blob, "Filestack rocks", { policy: 'eyJleHBpcnkiOjE2ODgxMzkwNTJ9', signature: '5f66059fcacd65298ea55f66bf005f73688534632f20e77c5b1f0ac69d1c0286' }, function(Blob) { console.log(JSON.stringify(Blob)); }, function(FPError) { // console.log("Error: "+FPError.toString()); - print errors to console } );

Example Write Code - Choose a PNG to replace the current image

Replace the contents of a Filestack image link with a new image
var blob = { url: 'https://cdn.filestackcontent.com/rN5kdNEaRRqU71t1WeVo', filename: '512x512.png', mimetype: 'image/png', size: 2572, isWriteable: true }; var input = document.getElementById("write-input"); if (!input.value) { console.log("Choose a png to write to the file"); } else { filepicker.write( blob, input, { policy: 'eyJleHBpcnkiOjE2ODgxMzkwNTJ9', signature: '5f66059fcacd65298ea55f66bf005f73688534632f20e77c5b1f0ac69d1c0286' }, function(Blob) { console.log("Write successful:", Blob.filename); }, function(FPError) { // console.log(FPError.toString()); - print errors to console }, function(progress) { console.log("Loading: " + progress + "%"); } ); }


the file to overwrite

A Blob pointing to the file you would like to write to. Note that if the Blob was pulled from a user's cloud storage service (Dropbox, etc.), the write will directly modify the file in their cloud storage. If the Blob was generated by a store operation or loaded from the user's computer, the write will edit the stored copy.

the file to replace the original

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

An optional dictionary of key-value pairs that specify how the write function behaves:
Base64 Decoding
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.

policy: POLICY, signature: SIGNATURE

If you have security enabled, you'll need to have 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

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

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

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