feat: read blob bytes directly in FileReader.readAsArrayBuffer

Author: paradowstack

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

@@ -19,7 +19,6 @@ import {
 import EventTarget from '../../src/private/webapis/dom/events/EventTarget';
 import DOMException from '../../src/private/webapis/errors/DOMException';
 import NativeFileReaderModule from './NativeFileReaderModule';
-import {toByteArray} from 'base64-js';
 
 type ReadyState =
   | 0 // EMPTY
@@ -123,17 +122,14 @@ class FileReader extends EventTarget {
       this._blob = blob;
     }
 
-    NativeFileReaderModule.readAsDataURL(blob.data).then(
-      (text: string) => {
+    NativeFileReaderModule.readAsArrayBuffer(blob.data).then(
+      (buffer: ArrayBuffer) => {
         if (readId !== this._readId) {
           return;
         }
         this._blob = null;
 
-        const base64 = text.split(',')[1];
-        const typedArray = toByteArray(base64);
-
-        this._result = typedArray.buffer;
+        this._result = buffer;
         this._setReadyState(DONE);
       },
       error => {

packages/react-native/Libraries/Blob/RCTBlobManager.h

@@ -23,6 +23,8 @@
 
 - (NSData *)resolve:(NSString *)blobId offset:(NSInteger)offset size:(NSInteger)size;
 
+- (RCTArrayBuffer *)resolveBuffer:(NSString *)blobId offset:(NSInteger)offset size:(NSInteger)size;
+
 - (NSData *)resolveURL:(NSURL *)url;
 
 - (void)remove:(NSString *)blobId;

packages/react-native/Libraries/Blob/RCTBlobManager.mm

@@ -117,6 +117,26 @@ - (NSData *)resolve:(NSString *)blobId offset:(NSInteger)offset size:(NSInteger)
   return data;
 }
 
+- (RCTArrayBuffer *)resolveBuffer:(NSString *)blobId offset:(NSInteger)offset size:(NSInteger)size
+{
+  NSData *stored;
+  {
+    std::lock_guard<std::mutex> lock(_blobsMutex);
+    stored = _blobs[blobId];
+  }
+  if (!stored) {
+    return nil;
+  }
+  NSInteger length = size == -1 ? (NSInteger)stored.length - offset : size;
+  if (offset < 0 || length < 0 || offset + length > (NSInteger)stored.length) {
+    return nil;
+  }
+  // One copy: the requested range goes straight into the new buffer. The copy is
+  // required because this RCTArrayBuffer is handed to JS zero-copy, and Blobs are
+  // immutable per the W3C File API — JS must not write through to blob storage.
+  return [RCTArrayBuffer arrayBufferWithCopiedBytes:(const uint8_t *)stored.bytes + offset length:(NSUInteger)length];
+}
+
 - (NSData *)resolveURL:(NSURL *)url
 {
   NSURLComponents *components = [[NSURLComponents alloc] initWithURL:url resolvingAgainstBaseURL:NO];

packages/react-native/Libraries/Blob/RCTFileReaderModule.mm

@@ -9,12 +9,15 @@
 
 #import <FBReactNativeSpec/FBReactNativeSpec.h>
 #import <React/RCTBridge.h>
-#import <React/RCTConvert.h>
+#import <React/RCTUtils.h>
 
+#import <React/RCTArrayBuffer.h>
 #import <React/RCTBlobManager.h>
 
 #import "RCTBlobPlugins.h"
 
+static NSString *const kRCTFileReaderInvalidBlobError = @"ERROR_INVALID_BLOB";
+
 @interface RCTFileReaderModule () <NativeFileReaderModuleSpec>
 @end
 
@@ -24,20 +27,21 @@ @implementation RCTFileReaderModule
 
 @synthesize moduleRegistry = _moduleRegistry;
 
-- (void)readAsText:(NSDictionary<NSString *, id> *)blob
+- (void)readAsText:(JS::NativeFileReaderModule::BlobDescriptor &)blob
           encoding:(NSString *)encoding
            resolve:(RCTPromiseResolveBlock)resolve
             reject:(RCTPromiseRejectBlock)reject
 {
+  NSString *blobId = blob.blobId();
+  NSInteger offset = (NSInteger)blob.offset();
+  NSInteger size = (NSInteger)blob.size();
+
   RCTBlobManager *blobManager = [_moduleRegistry moduleForName:"BlobModule"];
   dispatch_async(blobManager.methodQueue, ^{
-    NSData *data = [blobManager resolve:blob];
+    NSData *data = [blobManager resolve:blobId offset:offset size:size];
 
     if (data == nil) {
-      reject(
-          RCTErrorUnspecified,
-          [NSString stringWithFormat:@"Unable to resolve data for blob: %@", [RCTConvert NSString:blob[@"blobId"]]],
-          nil);
+      reject(RCTErrorUnspecified, [NSString stringWithFormat:@"Unable to resolve data for blob: %@", blobId], nil);
     } else {
       NSStringEncoding stringEncoding;
 
@@ -55,31 +59,51 @@ - (void)readAsText:(NSDictionary<NSString *, id> *)blob
   });
 }
 
-- (void)readAsDataURL:(NSDictionary<NSString *, id> *)blob
+- (void)readAsDataURL:(JS::NativeFileReaderModule::BlobDescriptor &)blob
               resolve:(RCTPromiseResolveBlock)resolve
                reject:(RCTPromiseRejectBlock)reject
 {
+  NSString *blobId = blob.blobId();
+  NSInteger offset = (NSInteger)blob.offset();
+  NSInteger size = (NSInteger)blob.size();
+  NSString *type = blob.type();
+
   RCTBlobManager *blobManager = [_moduleRegistry moduleForName:"BlobModule"];
   dispatch_async(blobManager.methodQueue, ^{
-    NSData *data = [blobManager resolve:blob];
+    NSData *data = [blobManager resolve:blobId offset:offset size:size];
 
     if (data == nil) {
-      reject(
-          RCTErrorUnspecified,
-          [NSString stringWithFormat:@"Unable to resolve data for blob: %@", [RCTConvert NSString:blob[@"blobId"]]],
-          nil);
+      reject(RCTErrorUnspecified, [NSString stringWithFormat:@"Unable to resolve data for blob: %@", blobId], nil);
     } else {
-      NSString *type = [RCTConvert NSString:blob[@"type"]];
-      NSString *text = [NSString
-          stringWithFormat:@"data:%@;base64,%@",
-                           ![type isEqual:[NSNull null]] && [type length] > 0 ? type : @"application/octet-stream",
-                           [data base64EncodedStringWithOptions:0]];
+      NSString *text = [NSString stringWithFormat:@"data:%@;base64,%@",
+                                                  type != nil && [type length] > 0 ? type : @"application/octet-stream",
+                                                  [data base64EncodedStringWithOptions:0]];
 
       resolve(text);
     }
   });
 }
 
+- (void)readAsArrayBuffer:(JS::NativeFileReaderModule::BlobDescriptor &)blob
+                  resolve:(RCTPromiseResolveBlock)resolve
+                   reject:(RCTPromiseRejectBlock)reject
+{
+  NSString *blobId = blob.blobId();
+  NSInteger offset = (NSInteger)blob.offset();
+  NSInteger size = (NSInteger)blob.size();
+
+  RCTBlobManager *blobManager = [_moduleRegistry moduleForName:"BlobModule"];
+  dispatch_async(blobManager.methodQueue, ^{
+    RCTArrayBuffer *buffer = [blobManager resolveBuffer:blobId offset:offset size:size];
+
+    if (buffer == nil) {
+      reject(kRCTFileReaderInvalidBlobError, @"The specified blob is invalid", nil);
+    } else {
+      resolve(buffer);
+    }
+  });
+}
+
 - (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
     (const facebook::react::ObjCTurboModule::InitParams &)params
 {

packages/react-native/Libraries/Blob/__mocks__/FileReaderModule.js

@@ -9,6 +9,9 @@
  */
 
 const FileReaderModule = {
+  async readAsArrayBuffer(): Promise<ArrayBuffer> {
+    return Uint8Array.from([52, 50]).buffer;
+  },
   async readAsText(): Promise<string> {
     return '';
   },

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

@@ -151,6 +151,117 @@ describe('FileReader', function () {
     expect(new TextDecoder().decode(ab)).toBe('42');
   });
 
+  // The FileReaderModule mock always resolves with these bytes, regardless of
+  // the blob it is handed.
+  const MOCK_READ_RESULT = [52, 50];
+
+  it('resolves result with the ArrayBuffer the native module returns', async () => {
+    const reader = new FileReader();
+
+    await new Promise<Event>(resolve => {
+      reader.onloadend = resolve;
+      reader.readAsArrayBuffer(new Blob());
+    });
+
+    expect(reader.readyState).toBe(FileReader.DONE);
+    expect(reader.result).toBeInstanceOf(ArrayBuffer);
+    const result = reader.result;
+    if (!(result instanceof ArrayBuffer)) {
+      throw new Error('expected ArrayBuffer');
+    }
+    expect(Array.from(new Uint8Array(result))).toEqual(MOCK_READ_RESULT);
+  });
+
+  it('throws a TypeError when readAsArrayBuffer is given null', () => {
+    const reader = new FileReader();
+    expect(() => reader.readAsArrayBuffer(null)).toThrow(TypeError);
+    expect(reader.readyState).toBe(FileReader.EMPTY);
+  });
+
+  it('should abort a pending ArrayBuffer read without firing load', async () => {
+    const reader = new FileReader();
+    let loaded = false;
+    reader.onload = () => {
+      loaded = true;
+    };
+    reader.readAsArrayBuffer(new Blob());
+    reader.abort();
+
+    expect(reader.readyState).toBe(FileReader.DONE);
+    expect(reader.result).toBe(null);
+
+    await Promise.resolve();
+    expect(loaded).toBe(false);
+    expect(reader.result).toBe(null);
+  });
+
+  it('should discard a stale ArrayBuffer result when a newer read is current', async () => {
+    const resolvers: Array<(ArrayBuffer) => void> = [];
+    const spy = jest
+      .spyOn(FileReaderModuleMock, 'readAsArrayBuffer')
+      .mockImplementation(
+        () =>
+          new Promise(resolve => {
+            resolvers.push(resolve);
+          }),
+      );
+
+    const reader = new FileReader();
+    let loaded = false;
+    reader.onload = () => {
+      loaded = true;
+    };
+
+    reader.readAsArrayBuffer(new Blob());
+    reader.abort();
+    expect(reader.result).toBe(null);
+
+    const done = new Promise<Event>(resolve => {
+      reader.onloadend = resolve;
+    });
+    reader.readAsArrayBuffer(new Blob());
+
+    // Stale first read settles with different bytes; the readId guard must drop it.
+    resolvers[0](Uint8Array.from([9, 9, 9]).buffer);
+    await Promise.resolve();
+    expect(reader.readyState).toBe(FileReader.LOADING);
+    expect(reader.result).toBe(null);
+    expect(loaded).toBe(false);
+
+    resolvers[1](Uint8Array.from([52, 50]).buffer);
+    await done;
+    expect(reader.readyState).toBe(FileReader.DONE);
+    expect(reader.result).toBeInstanceOf(ArrayBuffer);
+    const result = reader.result;
+    if (!(result instanceof ArrayBuffer)) {
+      throw new Error('expected ArrayBuffer');
+    }
+    expect(Array.from(new Uint8Array(result))).toEqual([52, 50]);
+    expect(loaded).toBe(true);
+
+    spy.mockRestore();
+  });
+
+  it('rejects a failed ArrayBuffer read with a NotReadableError DOMException', async () => {
+    const spy = jest
+      .spyOn(FileReaderModuleMock, 'readAsArrayBuffer')
+      .mockRejectedValue(new Error('The specified blob is invalid'));
+
+    const reader = new FileReader();
+    await new Promise<Event>(resolve => {
+      reader.onloadend = resolve;
+      reader.readAsArrayBuffer(new Blob());
+    });
+
+    expect(reader.readyState).toBe(FileReader.DONE);
+    expect(reader.result).toBe(null);
+    expect(reader.error).not.toBe(null);
+    expect(reader.error?.message).toBe('The specified blob is invalid');
+    expect(reader.error?.name).toBe('NotReadableError');
+
+    spy.mockRestore();
+  });
+
   it('fires lifecycle events in spec order for a successful read', async () => {
     const reader = new FileReader();
     const events: Array<string> = [];

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -2510,6 +2510,7 @@ public final class com/facebook/react/modules/blob/BlobModule : com/facebook/fbr
 	public final fun resolve (Landroid/net/Uri;)[B
 	public final fun resolve (Lcom/facebook/react/bridge/ReadableMap;)[B
 	public final fun resolve (Ljava/lang/String;II)[B
+	public final fun resolveBuffer (Ljava/lang/String;II)Lcom/facebook/react/bridge/ArrayBuffer;
 	public fun sendOverSocket (Lcom/facebook/react/bridge/ReadableMap;D)V
 	public final fun store ([B)Ljava/lang/String;
 	public final fun store ([BLjava/lang/String;)V
@@ -2532,6 +2533,7 @@ public final class com/facebook/react/modules/blob/BlobProvider : android/conten
 public final class com/facebook/react/modules/blob/FileReaderModule : com/facebook/fbreact/specs/NativeFileReaderModuleSpec {
 	public static final field Companion Lcom/facebook/react/modules/blob/FileReaderModule$Companion;
 	public fun <init> (Lcom/facebook/react/bridge/ReactApplicationContext;)V
+	public fun readAsArrayBuffer (Lcom/facebook/react/bridge/ReadableMap;Lcom/facebook/react/bridge/Promise;)V
 	public fun readAsDataURL (Lcom/facebook/react/bridge/ReadableMap;Lcom/facebook/react/bridge/Promise;)V
 	public fun readAsText (Lcom/facebook/react/bridge/ReadableMap;Ljava/lang/String;Lcom/facebook/react/bridge/Promise;)V
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/CxxArrayBufferCallbackImpl.kt

@@ -36,16 +36,26 @@ internal class CxxArrayBufferCallbackImpl @DoNotStrip private constructor() :
     }
     when (val arg = args.firstOrNull()) {
       null -> nativeInvoke(null, null)
-      is ArrayBuffer ->
-          if (arg.isOwningBytes) {
-            nativeInvoke(arg, null)
-          } else {
+      is ArrayBuffer -> {
+        if (arg.isOwningBytes) {
+          val buf = arg.bytes
+          if (buf.position() != 0 || buf.limit() != buf.capacity()) {
             nativeInvoke(
                 null,
-                "expected an ArrayBuffer that owns its bytes; the bytes of a non-owning one are " +
-                    "no longer valid by the time the Promise resolves. Copy them with " +
-                    "ArrayBuffer.arrayBufferWithCopiedBytes().")
+                "the ArrayBuffer's position must be 0 and its limit must equal its capacity; " +
+                    "position and limit are not preserved when the buffer is handed to " +
+                    "JavaScript.")
+            return
           }
+          nativeInvoke(arg, null)
+        } else {
+          nativeInvoke(
+              null,
+              "expected an ArrayBuffer that owns its bytes; the bytes of a non-owning one are " +
+                  "no longer valid by the time the Promise resolves. Copy them with " +
+                  "ArrayBuffer.arrayBufferWithCopiedBytes().")
+        }
+      }
       else -> nativeInvoke(null, "expected an ArrayBuffer or null, got ${arg.javaClass.name}")
     }
   }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/blob/BlobModule.kt

@@ -197,6 +197,25 @@ public class BlobModule(reactContext: ReactApplicationContext) :
     return resolve(blob.getString("blobId"), blob.getInt("offset"), blob.getInt("size"))
   }
 
+  /**
+   * Returns a newly allocated [ArrayBuffer] holding a copy of the requested range, or null if the
+   * blob is unknown.
+   *
+   * The copy is required: the returned buffer is handed to JS as an ArrayBuffer, and Blobs are
+   * immutable per the W3C File API — JS must not be able to write through to blob storage.
+   */
+  public fun resolveBuffer(blobId: String?, offset: Int, size: Int): ArrayBuffer? {
+    synchronized(blobs) {
+      val data = blobs[blobId] ?: return null
+      val length = if (size == -1) data.size - offset else size
+      val copy = ArrayBuffer(length)
+      val dest = copy.bytes
+      dest.put(data, offset, length)
+      dest.rewind()
+      return copy
+    }
+  }
+
   @Throws(IOException::class)
   private fun getBytesFromUri(contentUri: Uri): ByteArray {
     val inputStream =