feat: accept ArrayBuffer and ArrayBufferView parts in Blob and File

Author: paradowstack

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

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {BlobData, BlobOptions} from './BlobTypes';
+import type {BlobData, BlobOptions, BlobPart} from './BlobTypes';
 
 /**
  * Opaque JS representation of some binary data in native.
@@ -54,10 +54,10 @@ class Blob {
 
   /**
    * Constructor for JS consumers.
-   * Currently we only support creating Blobs from other Blobs.
+   * Accepts `Blob`, string, `ArrayBuffer`, and `ArrayBufferView` parts.
    * Reference: https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob
    */
-  constructor(parts: Array<Blob | string> = [], options?: BlobOptions) {
+  constructor(parts: Array<BlobPart> = [], options?: BlobOptions) {
     const BlobManager = require('./BlobManager').default;
     this.data = BlobManager.createFromParts(parts, options).data;
   }

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

@@ -9,7 +9,8 @@
  */
 
 import typeof BlobT from './Blob';
-import type {BlobCollector, BlobData, BlobOptions} from './BlobTypes';
+import type {BlobCollector, BlobData, BlobOptions, BlobPart} from './BlobTypes';
+import type {BlobPart as NativeBlobPart} from './NativeBlobModule';
 
 import NativeBlobModule from './NativeBlobModule';
 import invariant from 'invariant';
@@ -59,44 +60,66 @@ class BlobManager {
   /**
    * Create blob from existing array of blobs.
    */
-  static createFromParts(
-    parts: Array<Blob | string>,
-    options?: BlobOptions,
-  ): Blob {
+  static createFromParts(parts: Array<BlobPart>, options?: BlobOptions): Blob {
     invariant(NativeBlobModule, 'NativeBlobModule is available.');
-
     const blobId = uuidv4();
-    const items = parts.map(part => {
-      if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
-        throw new Error(
-          "Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported",
-        );
-      }
+    const binaryParts: Array<ArrayBuffer> = [];
+    let size = 0;
+
+    const nativeParts: Array<NativeBlobPart> = [];
+
+    for (const part of parts) {
       if (part instanceof Blob) {
-        return {
-          data: part.data,
-          type: 'blob',
-        };
-      } else {
-        return {
-          data: String(part),
-          type: 'string',
-        };
+        size += part.size;
+        nativeParts.push({type: 'blob', data: part.data});
+        continue;
       }
-    });
-    const size = items.reduce((acc, curr) => {
-      if (curr.type === 'string') {
-        /* $FlowFixMe[incompatible-type] Natural Inference rollout. See
-         * https://fburl.com/workplace/6291gfvu */
-        return acc + global.unescape(encodeURI(curr.data)).length;
-      } else {
-        /* $FlowFixMe[prop-missing] Natural Inference rollout. See
-         * https://fburl.com/workplace/6291gfvu */
-        return acc + curr.data.size;
+
+      if (
+        typeof part !== 'string' &&
+        (part instanceof ArrayBuffer || ArrayBuffer.isView(part))
+      ) {
+        const byteSize = part.byteLength;
+        size += byteSize;
+
+        // A detached or empty buffer contributes no bytes, and `slice` throws on
+        // a detached buffer — so there is nothing to send.
+        if (byteSize === 0) {
+          continue;
+        }
+
+        const index = binaryParts.length;
+        // Forwarded without copying here. A JS-heap `ArrayBuffer` is copied
+        // during argument conversion, because `createFromParts` is asynchronous
+        // — see `convertJSIArrayBufferToJArrayBuffer` and
+        // `convertJSIArrayBufferToRCTArrayBuffer`. A native-backed one is
+        // aliased instead, per the TurboModule zero-copy contract, so it is
+        // snapshotted only once the call reaches the module thread.
+        //
+        // A whole buffer therefore goes as-is; only a partial view is sliced,
+        // because the wire format carries whole buffers.
+        let source: ArrayBuffer;
+        if (part instanceof ArrayBuffer) {
+          source = part;
+        } else {
+          const buffer = part.buffer;
+          const byteOffset = part.byteOffset;
+          source =
+            byteOffset === 0 && byteSize === buffer.byteLength
+              ? buffer
+              : buffer.slice(byteOffset, byteOffset + byteSize);
+        }
+        binaryParts.push(source);
+        nativeParts.push({type: 'binaryPart', data: index});
+        continue;
       }
-    }, 0);
 
-    NativeBlobModule.createFromParts(items, blobId);
+      const text = String(part);
+      size += global.unescape(encodeURI(text)).length;
+      nativeParts.push({type: 'string', data: text});
+    }
+
+    NativeBlobModule.createFromParts(nativeParts, binaryParts, blobId);
 
     return BlobManager.createFromOptions({
       blobId,

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

@@ -4,14 +4,22 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  */
 
 'use strict';
 
+import type Blob from './Blob';
+
 export opaque type BlobCollector = {...};
 
+/**
+ * A value accepted by the Blob and File constructors (W3C `BlobPart`).
+ * https://w3c.github.io/FileAPI/#typedefdef-blobpart
+ */
+export type BlobPart = Blob | string | ArrayBuffer | $ArrayBufferView;
+
 export type BlobData = {
   blobId: string,
   offset: number,

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

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {BlobOptions} from './BlobTypes';
+import type {BlobOptions, BlobPart} from './BlobTypes';
 
 import Blob from './Blob';
 
@@ -23,11 +23,7 @@ class File extends Blob {
   /**
    * Constructor for JS consumers.
    */
-  constructor(
-    parts: Array<Blob | string>,
-    name: string,
-    options?: BlobOptions,
-  ) {
+  constructor(parts: Array<BlobPart>, name: string, options?: BlobOptions) {
     invariant(
       parts != null && name != null,
       'Failed to construct `File`: Must pass both `parts` and `name` arguments.',

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

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+#import <React/RCTArrayBuffer.h>
 #import <React/RCTBridge.h>
 #import <React/RCTBridgeModule.h>
 #import <React/RCTInitializing.h>
@@ -26,6 +27,8 @@
 
 - (void)remove:(NSString *)blobId;
 
-- (void)createFromParts:(NSArray<NSDictionary<NSString *, id> *> *)parts withId:(NSString *)blobId;
+- (void)createFromParts:(NSArray<NSDictionary<NSString *, id> *> *)parts
+            binaryParts:(NSArray<RCTArrayBuffer *> *)binaryParts
+                 withId:(NSString *)blobId;
 
 @end

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

@@ -178,26 +178,75 @@ - (void)removeWebSocketHandler:(double)socketID
   });
 }
 
-// @lint-ignore FBOBJCUNTYPEDCOLLECTION1
-- (void)sendOverSocket:(NSDictionary *)blob socketID:(double)socketID
+- (void)sendOverSocket:(JS::NativeBlobModule::BlobDescriptor &)blob socketID:(double)socketID
 {
+  NSString *blobId = blob.blobId();
+  NSInteger offset = (NSInteger)blob.offset();
+  NSInteger size = (NSInteger)blob.size();
+
   dispatch_async(((RCTWebSocketModule *)[_moduleRegistry moduleForName:"WebSocketModule"]).methodQueue, ^{
-    [[self->_moduleRegistry moduleForName:"WebSocketModule"] sendData:[self resolve:blob] forSocketID:@(socketID)];
+    [[self->_moduleRegistry moduleForName:"WebSocketModule"] sendData:[self resolve:blobId offset:offset size:size]
+                                                          forSocketID:@(socketID)];
   });
 }
 
-- (void)createFromParts:(NSArray<NSDictionary<NSString *, id> *> *)parts withId:(NSString *)blobId
+- (void)appendBlobRange:(NSDictionary<NSString *, id> *)blobDescriptor toData:(NSMutableData *)destination
+{
+  NSString *blobId = [RCTConvert NSString:blobDescriptor[@"blobId"]];
+  NSInteger offset = [RCTConvert NSInteger:blobDescriptor[@"offset"]];
+  NSInteger size = [RCTConvert NSInteger:blobDescriptor[@"size"]];
+
+  NSData *stored;
+  {
+    std::lock_guard<std::mutex> lock(_blobsMutex);
+    stored = _blobs[blobId];
+  }
+
+  if (!stored) {
+    [NSException raise:@"Invalid blob ID" format:@"blob %@ not found", blobId];
+    return;
+  }
+
+  NSInteger length = size == -1 ? (NSInteger)stored.length - offset : size;
+  if (offset < 0 || length < 0 || offset + length > (NSInteger)stored.length) {
+    [NSException raise:@"Invalid blob range"
+                format:@"offset %ld, length %ld exceeds blob size %lu",
+                       (long)offset,
+                       (long)length,
+                       (unsigned long)stored.length];
+    return;
+  }
+
+  [destination appendBytes:(const uint8_t *)stored.bytes + offset length:(NSUInteger)length];
+}
+
+- (void)createFromParts:(NSArray<NSDictionary<NSString *, id> *> *)parts
+            binaryParts:(NSArray<RCTArrayBuffer *> *)binaryParts
+                 withId:(NSString *)blobId
 {
   NSMutableData *data = [NSMutableData new];
   for (NSDictionary<NSString *, id> *part in parts) {
     NSString *type = [RCTConvert NSString:part[@"type"]];
 
     if ([type isEqualToString:@"blob"]) {
-      NSData *partData = [self resolve:part[@"data"]];
-      [data appendData:partData];
+      [self appendBlobRange:part[@"data"] toData:data];
     } else if ([type isEqualToString:@"string"]) {
       NSData *partData = [[RCTConvert NSString:part[@"data"]] dataUsingEncoding:NSUTF8StringEncoding];
       [data appendData:partData];
+    } else if ([type isEqualToString:@"binaryPart"]) {
+      NSInteger index = [RCTConvert NSInteger:part[@"data"]];
+      if (index < 0 || index >= (NSInteger)binaryParts.count) {
+        [NSException raise:@"Invalid binary part index for blob"
+                    format:@"%ld is out of range for %lu binary parts", (long)index, (unsigned long)binaryParts.count];
+      }
+      RCTArrayBuffer *binaryPart = binaryParts[index];
+      if (![binaryPart isKindOfClass:[RCTArrayBuffer class]]) {
+        [NSException raise:@"Invalid binary part for blob"
+                    format:@"binary part %ld is %@, expected RCTArrayBuffer", (long)index, [binaryPart class]];
+      }
+      if (binaryPart.length > 0) {
+        [data appendBytes:binaryPart.mutableBytes length:binaryPart.length];
+      }
     } else {
       [NSException raise:@"Invalid type for blob" format:@"%@ is invalid", type];
     }

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

@@ -8,9 +8,12 @@
  * @format
  */
 
-const BlobModule = {
-  createFromParts() {},
-  release() {},
+const BlobModule: {
+  createFromParts: JestMockFn<[Array<{...}>, Array<ArrayBuffer>, string], void>,
+  release: JestMockFn<[string], void>,
+} = {
+  createFromParts: jest.fn(),
+  release: jest.fn(),
 };
 
 export default BlobModule;

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

@@ -17,9 +17,14 @@ jest.mock('../../BatchedBridge/NativeModules', () => ({
   },
 }));
 
+const MockBlobModule = require('../__mocks__/BlobModule').default;
 const Blob = require('../Blob').default;
 
 describe('Blob', function () {
+  beforeEach(() => {
+    MockBlobModule.createFromParts.mockClear();
+  });
+
   it('should create empty blob', () => {
     const blob = new Blob();
     expect(blob).toBeInstanceOf(Blob);
@@ -58,6 +63,86 @@ describe('Blob', function () {
     expect(blob.type).toBe('');
   });
 
+  it('should send array buffer and typed array parts as binary parts', () => {
+    const bytes = Uint8Array.from([10, 20, 30, 40]);
+    const blob = new Blob([bytes.buffer, bytes.subarray(1, 3)]);
+
+    expect(blob.size).toBe(6);
+
+    const [parts, binaryParts] = MockBlobModule.createFromParts.mock.calls[0];
+
+    expect(parts).toEqual([
+      {type: 'binaryPart', data: 0},
+      {type: 'binaryPart', data: 1},
+    ]);
+    expect(binaryParts.map(b => Array.from(new Uint8Array(b)))).toEqual([
+      [10, 20, 30, 40],
+      [20, 30],
+    ]);
+  });
+
+  it('should preserve part ordering across mixed types', () => {
+    const inner = new Blob(['D']);
+    MockBlobModule.createFromParts.mockClear();
+
+    const blob = new Blob(['A', Uint8Array.from([66, 67]), inner]);
+    expect(blob.size).toBe(4);
+
+    const [parts, binaryParts] = MockBlobModule.createFromParts.mock.calls[0];
+
+    expect(parts).toEqual([
+      {type: 'string', data: 'A'},
+      {type: 'binaryPart', data: 0},
+      {type: 'blob', data: inner.data},
+    ]);
+    expect(binaryParts.map(b => Array.from(new Uint8Array(b)))).toEqual([
+      [66, 67],
+    ]);
+  });
+
+  it('should handle empty array buffer parts', () => {
+    expect(new Blob([new ArrayBuffer(0)]).size).toBe(0);
+  });
+
+  it('should count Float64Array and DataView parts in bytes', () => {
+    const f64 = new Float64Array([1.5, 2.5, 3.5]);
+    expect(new Blob([f64]).size).toBe(24);
+    expect(new Blob([new DataView(f64.buffer, 8, 8)]).size).toBe(8);
+  });
+
+  it('should treat a detached ArrayBuffer as an empty blob part', () => {
+    const ab = new ArrayBuffer(8);
+    // $FlowFixMe[cannot-resolve-name] Node's structuredClone is not in RN's Flow libs.
+    structuredClone(ab, {transfer: [ab]});
+    const blob = new Blob([ab]);
+    expect(blob.size).toBe(0);
+  });
+
+  it('should treat a detached ArrayBufferView as an empty blob part', () => {
+    const ab = new ArrayBuffer(8);
+    const view = new Uint8Array(ab, 2, 4);
+    // $FlowFixMe[cannot-resolve-name] Node's structuredClone is not in RN's Flow libs.
+    structuredClone(ab, {transfer: [ab]});
+    const blob = new Blob([view]);
+    expect(blob.size).toBe(0);
+  });
+
+  it('stringifies parts that are neither Blob nor BufferSource (W3C: USVString)', () => {
+    // $FlowExpectedError[incompatible-type]
+    expect(new Blob([42]).size).toBe(2);
+    // $FlowExpectedError[incompatible-type]
+    expect(new Blob([null]).size).toBe(4);
+    // $FlowExpectedError[incompatible-type]
+    expect(new Blob([undefined]).size).toBe(9);
+    // $FlowExpectedError[incompatible-type]
+    expect(new Blob([{}]).size).toBe(15);
+    // $FlowExpectedError[incompatible-type]
+    expect(new Blob([new String('abc')]).size).toBe(3); // eslint-disable-line no-new-wrappers
+
+    const [parts] = MockBlobModule.createFromParts.mock.calls[0];
+    expect(parts).toEqual([{type: 'string', data: '42'}]);
+  });
+
   it('should slice a blob', () => {
     const blob = new Blob();