A File object inhereits from
Blob, but 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 value, same as
fileName– file name string.
options– optional object:
lastModified– a 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. Then the file gets these from OS.
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 from
Blob (and hence
File too) objects.
It’s event based, as reading from disk may take time.
let reader = new FileReader(); // no arguments
The main methods:
readAsArrayBuffer(blob)– read the data as
readAsText(blob, [encoding])– read the data as a string (encoding is
readAsDataURL(blob)– encode the data as base64 data url.
abort()– cancel the operation.
As the reading proceeds, there are events:
loadstart– loading started.
progress– occurs during reading.
load– no errors, reading complete.
error– error has occured.
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 works for any blobs, not just files.
So 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 for workers only
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 and hang-ups in Web Workers are less important, they do not affect the page.
File object 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.
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, as network API like
fetch natively accepts