Adapt FileReader API to new events structure (#13301)

This PR adapts the FileReader API to conform to the new events structure.
mdn · Mar 2, 2022 · 1d27cff · 1d27cff
1 parent a993923
commit 1d27cff
Show file tree

Hide file tree

Showing 12 changed files with 129 additions and 249 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -7856,6 +7856,9 @@
 /en-US/docs/Web/API/FileReader.readAsText	/en-US/docs/Web/API/FileReader/readAsText
 /en-US/docs/Web/API/FileReader.readyState	/en-US/docs/Web/API/FileReader/readyState
 /en-US/docs/Web/API/FileReader.result	/en-US/docs/Web/API/FileReader/result
+/en-US/docs/Web/API/FileReader/onabort	/en-US/docs/Web/API/FileReader/abort_event
+/en-US/docs/Web/API/FileReader/onerror	/en-US/docs/Web/API/FileReader/error_event
+/en-US/docs/Web/API/FileReader/onload	/en-US/docs/Web/API/FileReader/load_event
 /en-US/docs/Web/API/FileRequest.lockedFile	/en-US/docs/Web/API/FileRequest/lockedFile
 /en-US/docs/Web/API/FileRequest.onprogress	/en-US/docs/Web/API/FileRequest/onprogress
 /en-US/docs/Web/API/FileSystemFileEntry/FileSystemFileEntry.createWriter	/en-US/docs/Web/API/FileSystemFileEntry/createWriter

diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
@@ -44743,33 +44743,6 @@
       "wbamberg"
     ]
   },
-  "Web/API/FileReader/onabort": {
-    "modified": "2020-12-09T19:56:06.234Z",
-    "contributors": [
-      "bershanskiy",
-      "NotWoods"
-    ]
-  },
-  "Web/API/FileReader/onerror": {
-    "modified": "2020-12-09T19:57:36.155Z",
-    "contributors": [
-      "bershanskiy",
-      "1j01",
-      "pungggi"
-    ]
-  },
-  "Web/API/FileReader/onload": {
-    "modified": "2020-10-15T21:41:07.311Z",
-    "contributors": [
-      "nujabes403",
-      "nongomacoders",
-      "fscholz",
-      "prateekrbhutani",
-      "teoli",
-      "mrenty",
-      "nihey"
-    ]
-  },
   "Web/API/FileReader/progress_event": {
     "modified": "2020-10-15T22:15:39.291Z",
     "contributors": [

diff --git a/files/en-us/web/api/filereader/abort_event/index.md b/files/en-us/web/api/filereader/abort_event/index.md
@@ -15,26 +15,27 @@ browser-compat: api.FileReader.abort_event
 
 The `abort` event is fired when a read has been aborted: for instance because the program called {{domxref("FileReader.abort()")}}.
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Cancelable</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Interface</th>
-      <td>{{domxref("ProgressEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>{{domxref("FileReader.onabort")}}</td>
-    </tr>
-  </tbody>
-</table>
+This event is not cancelable and does not bubble.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('abort', event => { });
+
+onabort = event => { };
+```
+
+## Event type
+
+An {{domxref("ProgressEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("ProgressEvent")}}
+
+## Event properties
+
+{{page("/en-US/docs/Web/API/ProgressEvent", "Properties")}}
 
 ## Examples
 

diff --git a/files/en-us/web/api/filereader/error_event/index.md b/files/en-us/web/api/filereader/error_event/index.md
@@ -16,26 +16,27 @@ browser-compat: api.FileReader.error_event
 
 The `error` event is fired when the read failed due to an error (for example, because the file was not found or not readable).
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Cancelable</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Interface</th>
-      <td>{{domxref("ProgressEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>{{domxref("FileReader.onerror")}}</td>
-    </tr>
-  </tbody>
-</table>
+This event is not cancelable and does not bubble.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('error', event => { });
+
+onerror = event => { };
+```
+
+## Event type
+
+An {{domxref("ProgressEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("ProgressEvent")}}
+
+## Event properties
+
+{{page("/en-US/docs/Web/API/ProgressEvent", "Properties")}}
 
 ## Examples
 

diff --git a/files/en-us/web/api/filereader/index.md b/files/en-us/web/api/filereader/index.md
@@ -45,23 +45,6 @@ See [Using files from web applications](/en-US/docs/Web/API/File/Using_files_fro
 - {{domxref("FileReader.result")}} {{readonlyinline}}
   - : The file's contents. This property is only valid after the read operation is complete, and the format of the data depends on which of the methods was used to initiate the read operation.
 
-### Event handlers
-
-- {{domxref("FileReader.onabort")}}
-  - : A handler for the {{domxref("FileReader.abort_event")}} event. This event is triggered each time the reading operation is aborted.
-- {{domxref("FileReader.onerror")}}
-  - : A handler for the {{domxref("FileReader.error_event")}} event. This event is triggered each time the reading operation encounter an error.
-- {{domxref("FileReader.onload")}}
-  - : A handler for the {{domxref("FileReader.load_event")}} event. This event is triggered each time the reading operation is successfully completed.
-- {{domxref("FileReader.onloadstart")}}
-  - : A handler for the {{domxref("FileReader.loadstart_event")}} event. This event is triggered each time the reading is starting.
-- {{domxref("FileReader.onloadend")}}
-  - : A handler for the {{domxref("FileReader.loadend_event")}} event. This event is triggered each time the reading operation is completed (either in success or failure).
-- {{domxref("FileReader.onprogress")}}
-  - : A handler for the {{domxref("FileReader.progress")}} event. This event is triggered while reading a {{domxref("Blob")}} content.
-
-> **Note:** As `FileReader` inherits from {{domxref("EventTarget")}}, all those events can also be listened for by using the {{domxref("EventTarget.addEventListener()","addEventListener")}} method.
-
 ## Methods
 
 - {{domxref("FileReader.abort()")}}
@@ -81,22 +64,16 @@ Listen to these events using {{domxref("EventTarget/addEventListener", "addEvent
 
 - {{domxref("FileReader/abort_event", "abort")}}
   - : Fired when a read has been aborted, for example because the program called {{domxref("FileReader.abort()")}}.
-    Also available via the {{domxref("FileReader/onabort", "onabort")}} property.
 - {{domxref("FileReader/error_event", "error")}}
   - : Fired when the read failed due to an error.
-    Also available via the {{domxref("FileReader/onerror", "onerror")}} property.
 - {{domxref("FileReader/load_event", "load")}}
   - : Fired when a read has completed successfully.
-    Also available via the {{domxref("FileReader/onload", "onload")}} property.
 - {{domxref("FileReader/loadend_event", "loadend")}}
   - : Fired when a read has completed, successfully or not.
-    Also available via the {{domxref("FileReader/onloadend", "onloadend")}} property.
 - {{domxref("FileReader/loadstart_event", "loadstart")}}
   - : Fired when a read has started.
-    Also available via the {{domxref("FileReader/onloadstart", "onloadstart")}} property.
 - {{domxref("FileReader/progress_event", "progress")}}
   - : Fired periodically as data is read.
-    Also available via the {{domxref("FileReader/onprogress", "onprogress")}} property.
 
 ## Specifications
 

diff --git a/files/en-us/web/api/filereader/load_event/index.md b/files/en-us/web/api/filereader/load_event/index.md
@@ -13,26 +13,27 @@ browser-compat: api.FileReader.load_event
 
 The `load` event is fired when a file has been read successfully.
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Cancelable</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Interface</th>
-      <td>{{domxref("ProgressEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>{{domxref("FileReader.onload")}}</td>
-    </tr>
-  </tbody>
-</table>
+This event is not cancelable and does not bubble.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('load', event => { });
+
+onload = event => { };
+```
+
+## Event type
+
+An {{domxref("ProgressEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("ProgressEvent")}}
+
+## Event properties
+
+{{page("/en-US/docs/Web/API/ProgressEvent", "Properties")}}
 
 ## Examples
 

diff --git a/files/en-us/web/api/filereader/loadend_event/index.md b/files/en-us/web/api/filereader/loadend_event/index.md
@@ -14,26 +14,27 @@ browser-compat: api.FileReader.loadend_event
 
 The `loadend` event is fired when a file read has completed, successfully or not.
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Cancelable</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Interface</th>
-      <td>{{domxref("ProgressEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>{{domxref("FileReader.onloadend")}}</td>
-    </tr>
-  </tbody>
-</table>
+This event is not cancelable and does not bubble.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('loadend', event => { });
+
+onloadend = event => { };
+```
+
+## Event type
+
+An {{domxref("ProgressEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("ProgressEvent")}}
+
+## Event properties
+
+{{page("/en-US/docs/Web/API/ProgressEvent", "Properties")}}
 
 ## Examples
 

diff --git a/files/en-us/web/api/filereader/loadstart_event/index.md b/files/en-us/web/api/filereader/loadstart_event/index.md
@@ -14,26 +14,27 @@ browser-compat: api.FileReader.loadstart_event
 
 The `loadstart` event is fired when a file read operation has begun.
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Cancelable</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Interface</th>
-      <td>{{domxref("ProgressEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>{{domxref("FileReader.onloadstart")}}</td>
-    </tr>
-  </tbody>
-</table>
+This event is not cancelable and does not bubble.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('loadstart', event => { });
+
+onloadstart = event => { };
+```
+
+## Event type
+
+An {{domxref("ProgressEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("ProgressEvent")}}
+
+## Event properties
+
+{{page("/en-US/docs/Web/API/ProgressEvent", "Properties")}}
 
 ## Examples
 

diff --git a/files/en-us/web/api/filereader/onabort/index.md b/files/en-us/web/api/filereader/onabort/index.md
diff --git a/files/en-us/web/api/filereader/onerror/index.md b/files/en-us/web/api/filereader/onerror/index.md