You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 4-binary/04-file/article.md
+22-18
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# File and FileReader
2
2
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.
4
4
5
5
There are two ways to obtain it.
6
6
@@ -10,14 +10,18 @@ First, there's a constructor, similar to `Blob`:
10
10
newFile(fileParts, fileName, [options])
11
11
```
12
12
13
-
-**`fileParts`** -- is an array of Blob/BufferSource/String value, same as `Blob`.
13
+
-**`fileParts`** -- is an array of Blob/BufferSource/String values.
14
14
-**`fileName`** -- file name string.
15
15
-**`options`** -- optional object:
16
-
-**`lastModified`** -- a timestamp (integer date) of last modification.
16
+
-**`lastModified`** -- the timestamp (integer date) of last modification.
17
17
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.
19
19
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">`:
21
25
22
26
```html run
23
27
<inputtype="file"onchange="showFile(this)">
@@ -38,9 +42,9 @@ The input may select multiple files, so `input.files` is an array-like object wi
38
42
39
43
## FileReader
40
44
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.
42
46
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.
44
48
45
49
The constructor:
46
50
@@ -50,9 +54,9 @@ let reader = new FileReader(); // no arguments
50
54
51
55
The main methods:
52
56
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.
56
60
-**`abort()`** -- cancel the operation.
57
61
58
62
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:
66
70
-`progress` -- occurs during reading.
67
71
-`load` -- no errors, reading complete.
68
72
-`abort` -- `abort()` called.
69
-
-`error` -- error has occured.
73
+
-`error` -- error has occurred.
70
74
-`loadend` -- reading finished with either success or failure.
71
75
72
76
When the reading is finished, we can access the result as:
@@ -101,28 +105,28 @@ function readFile(input) {
101
105
```
102
106
103
107
```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.
105
109
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:
107
111
-`readAsArrayBuffer(blob)` -- to `ArrayBuffer`,
108
112
-`readAsText(blob, [encoding])` -- to string (an alternative to `TextDecoder`),
109
113
-`readAsDataURL(blob)` -- to base64 data url.
110
114
```
111
115
112
116
113
-
```smart header="`FileReaderSync` is available for workers only"
117
+
```smart header="`FileReaderSync` is available inside Web Workers"
114
118
For Web Workers, there also exists a synchronous variant of `FileReader`, called [FileReaderSync](https://www.w3.org/TR/FileAPI/#FileReaderSync).
115
119
116
120
Its reading methods `read*` do not generate events, but rather return a result, as regular functions do.
117
121
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.
119
123
```
120
124
121
125
## Summary
122
126
123
-
`File`object inherit from `Blob`.
127
+
`File`objects inherit from `Blob`.
124
128
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`).
126
130
127
131
`FileReader` objects can read from a file or a blob, in one of three formats:
128
132
- String (`readAsText`).
@@ -131,4 +135,4 @@ In addition to `Blob` methods and properties, `File` objects also have `fileName
131
135
132
136
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.
133
137
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