Read Files

Once a file has been uploaded you can use the filepicker.read() method to work with the contents.

Syntax

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

Example Read Code - Read the contents a text file

Read the contents of a file and console log the data
/*Blob from a previous pick, etc.*/ var blob = { url: 'https://cdn.filestackcontent.com/H4Y1If7sT5CptunlLypo', filename: 'filestack.html', mimetype: 'text/html', isWriteable: true, size: 251220 }; console.log("Loading "+blob.filename); filepicker.read( blob, function(data){ console.log(data); } );

Example Read Code - Read and Display the contents of an image

Read the raw contents of an image from a standard input field, base64 encode it and then display it
var input = document.getElementById("read-input"); var output = document.getElementById("read-result"); if (!input.value) { console.log("Choose an image to read below"); } else { filepicker.read( input, {base64encode: true}, function(imgdata){ var img = document.createElement('img'); img.src = 'data:image/png;base64,'+imgdata; output.removeChild(output.firstChild); output.appendChild(img); console.log("Read successful"); }, function(fperror) { // console.log(FPError.toString()); - print errors to console } ); }

Choose image above

Parameters

input
the object to read
input
Blob
{blob}

The object to read. Can be a Blob, a URL, a DOM File Object, or an <input type="file"/>.

options
An optional dictionary of key-value pairs that specify how the read function behaves
Base64 Encoding
Boolean
{base64encode: true}

Specify that you want the data to be converted into base64. This is useful when the contents of the file are binary rather than text, for example with images. There are also filepicker.base64.encode and filepicker.base64.decode methods available for your convenience.

Caching
Boolean
{cache: true}

Determines whether the data should be pulled from the browser's cache. Defaults to false. Can make reads faster if you are sure the underlying file won't change.

Security
String
{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

onSuccess
The function to call with the raw contents of the inputted file.

We return the raw data of the file unless told otherwise with read options

Sample response (raw image data)

iVBORw0KGgoAAAANSUhEUgAAABsAAAAQCAIAAABocZPBAAAAA3NCSVQICAjb4U/gAAAAGXRFWHRTb2Z0d2FyZQBnbm9tZS1zY3JlZW5zaG907wO/PgAAAB5JREFUOI1jDDjzjoGqgIm6xo2aOGriqImjJg6QiQDGRAIq+9uMHwAAAABJRU5ErkJggg==
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}