Keep FileReader in DONE state after abort (#57692)

Summary:
Before #57375, reads never entered `LOADING`, so the active abort path was effectively unreachable. Now that reads use `LOADING`, that path calls `_reset()` before and after transitioning to `DONE`, leaving the reader in `EMPTY` after `abort()` returns.

This differs from the [File API abort algorithm](https://w3c.github.io/FileAPI/#dfn-abort), which keeps an active reader in `DONE`. The final reset also overwrites a replacement read started by an `abort` handler, and that new read clears the shared `_aborted` flag before the canceled native promise settles.

This change:

- keeps an aborted active reader in `DONE` with a null result
- skips the old `loadend` if the abort handler starts another read
- gives each read an ID so a canceled native promise cannot complete over a newer read

## Changelog:

[GENERAL] [FIXED] - Keep `FileReader` in the correct state after aborting a read.

Pull Request resolved: #57692

Test Plan:
- `yarn jest packages/react-native/Libraries/Blob/__tests__/FileReader-test.js --runInBand`
- `./node_modules/.bin/prettier --check packages/react-native/Libraries/Blob/FileReader.js packages/react-native/Libraries/Blob/__tests__/FileReader-test.js`
- `./node_modules/.bin/eslint --max-warnings 0 packages/react-native/Libraries/Blob/FileReader.js packages/react-native/Libraries/Blob/__tests__/FileReader-test.js`
- `yarn flow-check`

Reviewed By: christophpurrer

Differential Revision: D113802292

Pulled By: Abbondanzo

fbshipit-source-id: d5c8beeaf2539f3784e7f61ba500e67da575164c

Author: fallintoplace

packages/react-native/Libraries/Blob/FileReader.js

@@ -44,6 +44,7 @@ class FileReader extends EventTarget {
   _error: ?Error;
   _result: ?ReaderResult;
   _aborted: boolean = false;
+  _readId: number = 0;
 
   constructor() {
     super();
@@ -56,6 +57,15 @@ class FileReader extends EventTarget {
     this._result = null;
   }
 
+  _startRead(): number {
+    this._aborted = false;
+    this._error = null;
+    this._result = null;
+    const readId = ++this._readId;
+    this._setReadyState(LOADING);
+    return readId;
+  }
+
   _setReadyState(newState: ReadyState) {
     this._readyState = newState;
     this.dispatchEvent(new Event('readystatechange'));
@@ -67,24 +77,24 @@ class FileReader extends EventTarget {
       } else {
         this.dispatchEvent(new Event('load'));
       }
-      this.dispatchEvent(new Event('loadend'));
+      if (this._readyState !== LOADING) {
+        this.dispatchEvent(new Event('loadend'));
+      }
     }
   }
 
   readAsArrayBuffer(blob: ?Blob): void {
-    this._aborted = false;
-
     if (blob == null) {
       throw new TypeError(
         "Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'",
       );
     }
 
-    this._setReadyState(LOADING);
+    const readId = this._startRead();
 
     NativeFileReaderModule.readAsDataURL(blob.data).then(
       (text: string) => {
-        if (this._aborted) {
+        if (readId !== this._readId) {
           return;
         }
 
@@ -95,7 +105,7 @@ class FileReader extends EventTarget {
         this._setReadyState(DONE);
       },
       error => {
-        if (this._aborted) {
+        if (readId !== this._readId) {
           return;
         }
         this._error = error;
@@ -105,26 +115,24 @@ class FileReader extends EventTarget {
   }
 
   readAsDataURL(blob: ?Blob): void {
-    this._aborted = false;
-
     if (blob == null) {
       throw new TypeError(
         "Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'",
       );
     }
 
-    this._setReadyState(LOADING);
+    const readId = this._startRead();
 
     NativeFileReaderModule.readAsDataURL(blob.data).then(
       (text: string) => {
-        if (this._aborted) {
+        if (readId !== this._readId) {
           return;
         }
         this._result = text;
         this._setReadyState(DONE);
       },
       error => {
-        if (this._aborted) {
+        if (readId !== this._readId) {
           return;
         }
         this._error = error;
@@ -134,26 +142,24 @@ class FileReader extends EventTarget {
   }
 
   readAsText(blob: ?Blob, encoding: string = 'UTF-8'): void {
-    this._aborted = false;
-
     if (blob == null) {
       throw new TypeError(
         "Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'",
       );
     }
 
-    this._setReadyState(LOADING);
+    const readId = this._startRead();
 
     NativeFileReaderModule.readAsText(blob.data, encoding).then(
       (text: string) => {
-        if (this._aborted) {
+        if (readId !== this._readId) {
           return;
         }
         this._result = text;
         this._setReadyState(DONE);
       },
       error => {
-        if (this._aborted) {
+        if (readId !== this._readId) {
           return;
         }
         this._error = error;
@@ -163,14 +169,12 @@ class FileReader extends EventTarget {
   }
 
   abort() {
-    this._aborted = true;
-    // only call onreadystatechange if there is something to abort, as per spec
-    if (this._readyState !== EMPTY && this._readyState !== DONE) {
-      this._reset();
+    this._result = null;
+    if (this._readyState === LOADING) {
+      this._aborted = true;
+      this._readId++;
       this._setReadyState(DONE);
     }
-    // Reset again after, in case modified in handler
-    this._reset();
   }
 
   get readyState(): ReadyState {

packages/react-native/Libraries/Blob/__tests__/FileReader-test.js

@@ -14,6 +14,7 @@ import type Event from '../../../src/private/webapis/dom/events/Event';
 
 const Blob = require('../Blob').default;
 const FileReader = require('../FileReader').default;
+const NativeFileReaderModule = require('../NativeFileReaderModule').default;
 
 jest.mock('../../BatchedBridge/NativeModules', () => ({
   __esModule: true,
@@ -69,6 +70,63 @@ describe('FileReader', function () {
     reader.abort();
     expect(aborted).toBe(true);
     expect(loadended).toBe(true);
+    expect(reader.readyState).toBe(FileReader.DONE);
+    expect(reader.result).toBe(null);
+  });
+
+  it('should preserve a read started by an abort handler', async () => {
+    const reader = new FileReader();
+    let loadendCount = 0;
+    const replacementRead = new Promise<void>(resolve => {
+      reader.onloadend = () => {
+        loadendCount++;
+        resolve();
+      };
+    });
+    reader.onabort = () => {
+      reader.readAsText(new Blob());
+    };
+
+    reader.readAsText(new Blob());
+    reader.abort();
+
+    expect(reader.readyState).toBe(FileReader.LOADING);
+    expect(loadendCount).toBe(0);
+
+    await replacementRead;
+    expect(reader.readyState).toBe(FileReader.DONE);
+    expect(reader.result).toBe('');
+    expect(loadendCount).toBe(1);
+  });
+
+  it('should clear stale result and error when starting a read', async () => {
+    const reader = new FileReader();
+    const readAsText = jest.spyOn(NativeFileReaderModule, 'readAsText');
+
+    const successfulRead = new Promise<void>(resolve => {
+      reader.onloadend = () => resolve();
+    });
+    reader.readAsText(new Blob());
+    await successfulRead;
+    expect(reader.result).toBe('');
+
+    const error = new Error('read failed');
+    readAsText.mockRejectedValueOnce(error);
+    const failedRead = new Promise<void>(resolve => {
+      reader.onloadend = () => resolve();
+    });
+    reader.readAsText(new Blob());
+    expect(reader.result).toBe(null);
+    expect(reader.error).toBe(null);
+    await failedRead;
+    expect(reader.error).toBe(error);
+
+    readAsText.mockReturnValueOnce(new Promise(() => {}));
+    reader.readAsText(new Blob());
+    expect(reader.result).toBe(null);
+    expect(reader.error).toBe(null);
+
+    readAsText.mockRestore();
   });
 
   it('should read blob as ArrayBuffer', async () => {