A File object inherits from
Blob and is extended with filesystem-related capabilities.
There are two ways to obtain it.
First, there’s a constructor, similar to
new File(fileParts, fileName, [options])
fileParts– is an array of Blob/BufferSource/String values.
fileName– file name string.
options– optional object:
lastModified– the timestamp (integer date) of last modification.
Second, more often we get a file from
<input type="file"> or drag’n’drop or other browser interfaces. In that case, the file gets this information from OS.
File inherits from
File objects have the same properties, plus:
name– the file name,
lastModified– the timestamp of last modification.
That’s how we can get a
File object from
The input may select multiple files, so
input.files is an array-like object with them. Here we have only one file, so we just take
FileReader is an object with the sole purpose of reading data from
Blob (and hence
File too) objects.
It delivers the data using events, as reading from disk may take time.
let reader = new FileReader(); // no arguments
The main methods:
readAsArrayBuffer(blob)– read the data in binary format
readAsText(blob, [encoding])– read the data as a text string with the given encoding (
readAsDataURL(blob)– read the binary data and encode it as base64 data url.
abort()– cancel the operation.
The choice of
read* method depends on which format we prefer, how we’re going to use the data.
readAsArrayBuffer– for binary files, to do low-level binary operations. For high-level operations, like slicing,
Blob, so we can call them directly, without reading.
readAsText– for text files, when we’d like to get a string.
readAsDataURL– when we’d like to use this data in
imgor another tag. There’s an alternative to reading a file for that, as discussed in chapter Blob:
As the reading proceeds, there are events:
loadstart– loading started.
progress– occurs during reading.
load– no errors, reading complete.
error– error has occurred.
loadend– reading finished with either success or failure.
When the reading is finished, we can access the result as:
reader.resultis the result (if successful)
reader.erroris the error (if failed).
The most widely used events are for sure
Here’s an example of reading a file:
As mentioned in the chapter Blob,
FileReader can read not just files, but any blobs.
We can use it to convert a blob to another format:
readAsText(blob, [encoding])– to string (an alternative to
readAsDataURL(blob)– to base64 data url.
FileReaderSyncis available inside Web Workers
For Web Workers, there also exists a synchronous variant of
FileReader, called FileReaderSync.
Its reading methods
read* do not generate events, but rather return a result, as regular functions do.
That’s only inside a Web Worker though, because delays in synchronous calls, that are possible while reading from files, in Web Workers are less important. They do not affect the page.
File objects inherit from
In addition to
Blob methods and properties,
File objects also have
lastModified properties, plus the internal ability to read from filesystem. We usually get
File objects from user input, like
<input> or Drag’n’Drop events (
FileReader objects can read from a file or a blob, in one of three formats:
- String (
- Data url, base-64 encoded (
In many cases though, we don’t have to read the file contents. Just as we did with blobs, we can create a short url with
URL.createObjectURL(file) and assign it to
<img>. This way the file can be downloaded or shown up as an image, as a part of canvas etc.
And if we’re going to send a
File over a network, that’s also easy: network API like
fetch natively accepts
<code>tag, for several lines – wrap them in
<pre>tag, for more than 10 lines – use a sandbox (plnkr, jsbin, codepen…)