Skip to content

Commit c0e2fe0

Browse files
committed
Update "File and FileReader" article
1 parent 8782284 commit c0e2fe0

File tree

1 file changed

+22
-18
lines changed

1 file changed

+22
-18
lines changed

4-binary/04-file/article.md

+22-18
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# File and FileReader
22

3-
A [File](https://www.w3.org/TR/FileAPI/#dfn-file) object inhereits from `Blob`, but is extended with filesystem-related capabilities.
3+
A [File](https://www.w3.org/TR/FileAPI/#dfn-file) object inherits from `Blob` and is extended with filesystem-related capabilities.
44

55
There are two ways to obtain it.
66

@@ -10,14 +10,18 @@ First, there's a constructor, similar to `Blob`:
1010
new File(fileParts, fileName, [options])
1111
```
1212

13-
- **`fileParts`** -- is an array of Blob/BufferSource/String value, same as `Blob`.
13+
- **`fileParts`** -- is an array of Blob/BufferSource/String values.
1414
- **`fileName`** -- file name string.
1515
- **`options`** -- optional object:
16-
- **`lastModified`** -- a timestamp (integer date) of last modification.
16+
- **`lastModified`** -- the timestamp (integer date) of last modification.
1717

18-
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.
18+
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.
1919

20-
For instance:
20+
As `File` inherits from `Blob`, `File` objects have the same properties, plus:
21+
- `name` -- the file name,
22+
- `lastModified` -- the timestamp of last modification.
23+
24+
That's how we can get a `File` object from `<input type="file">`:
2125

2226
```html run
2327
<input type="file" onchange="showFile(this)">
@@ -38,9 +42,9 @@ The input may select multiple files, so `input.files` is an array-like object wi
3842

3943
## FileReader
4044

41-
[FileReader](https://www.w3.org/TR/FileAPI/#dfn-filereader) is an object with the sole purpose of reading from `Blob` (and hence `File` too) objects.
45+
[FileReader](https://www.w3.org/TR/FileAPI/#dfn-filereader) is an object with the sole purpose of reading data from `Blob` (and hence `File` too) objects.
4246

43-
It's event based, as reading from disk may take time.
47+
It delivers the data using events, as reading from disk may take time.
4448

4549
The constructor:
4650

@@ -50,9 +54,9 @@ let reader = new FileReader(); // no arguments
5054

5155
The main methods:
5256

53-
- **`readAsArrayBuffer(blob)`** -- read the data as `ArrayBuffer`
54-
- **`readAsText(blob, [encoding])`** -- read the data as a string (encoding is `utf-8` by default)
55-
- **`readAsDataURL(blob)`** -- encode the data as base64 data url.
57+
- **`readAsArrayBuffer(blob)`** -- read the data in binary format `ArrayBuffer`.
58+
- **`readAsText(blob, [encoding])`** -- read the data as a text string with the given encoding (`utf-8` by default).
59+
- **`readAsDataURL(blob)`** -- read the binary data and encode it as base64 data url.
5660
- **`abort()`** -- cancel the operation.
5761

5862
The choice of `read*` method depends on which format we prefer, how we're going to use the data.
@@ -66,7 +70,7 @@ As the reading proceeds, there are events:
6670
- `progress` -- occurs during reading.
6771
- `load` -- no errors, reading complete.
6872
- `abort` -- `abort()` called.
69-
- `error` -- error has occured.
73+
- `error` -- error has occurred.
7074
- `loadend` -- reading finished with either success or failure.
7175

7276
When the reading is finished, we can access the result as:
@@ -101,28 +105,28 @@ function readFile(input) {
101105
```
102106

103107
```smart header="`FileReader` for blobs"
104-
As mentioned in the chapter <info:blob>, `FileReader` works for any blobs, not just files.
108+
As mentioned in the chapter <info:blob>, `FileReader` can read not just files, but any blobs.
105109

106-
So we can use it to convert a blob to another format:
110+
We can use it to convert a blob to another format:
107111
- `readAsArrayBuffer(blob)` -- to `ArrayBuffer`,
108112
- `readAsText(blob, [encoding])` -- to string (an alternative to `TextDecoder`),
109113
- `readAsDataURL(blob)` -- to base64 data url.
110114
```
111115
112116
113-
```smart header="`FileReaderSync` is available for workers only"
117+
```smart header="`FileReaderSync` is available inside Web Workers"
114118
For Web Workers, there also exists a synchronous variant of `FileReader`, called [FileReaderSync](https://www.w3.org/TR/FileAPI/#FileReaderSync).
115119
116120
Its reading methods `read*` do not generate events, but rather return a result, as regular functions do.
117121
118-
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.
122+
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.
119123
```
120124

121125
## Summary
122126

123-
`File` object inherit from `Blob`.
127+
`File` objects inherit from `Blob`.
124128

125-
In addition to `Blob` methods and properties, `File` objects also have `fileName` and `lastModified` properties, plus the internal ability to read from filesystem. We usually get `File` objects from user input, like `<input>` or drag'n'drop.
129+
In addition to `Blob` methods and properties, `File` objects also have `name` and `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 (`ondragend`).
126130

127131
`FileReader` objects can read from a file or a blob, in one of three formats:
128132
- String (`readAsText`).
@@ -131,4 +135,4 @@ In addition to `Blob` methods and properties, `File` objects also have `fileName
131135

132136
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 `<a>` or `<img>`. This way the file can be downloaded or shown up as an image, as a part of canvas etc.
133137

134-
And if we're going to send a `File` over a network, that's also easy, as network API like `XMLHttpRequest` or `fetch` natively accepts `File` objects.
138+
And if we're going to send a `File` over a network, that's also easy: network API like `XMLHttpRequest` or `fetch` natively accepts `File` objects.

0 commit comments

Comments
 (0)