fix: handle blobs as stream when FileReader.readAsArrayBuffer is available

Author: acostalima

package-lock.json

@@ -36,7 +36,10 @@
     "querystring": "^0.2.0",
     "react-native-polyfill-globals": "^2.0.0",
     "react-native-test-runner": "^2.0.0",
+    "react-native-url-polyfill": "^1.2.0",
     "standard-version": "^9.1.0",
+    "text-encoding": "^0.7.0",
+    "web-streams-polyfill": "^3.0.1",
     "zora": "^4.0.2"
   },
   "files": [

package.json

@@ -1,22 +1,25 @@
 import BlobManager from "react-native/Libraries/Blob/BlobManager";
 import Response from "./Response";
-// import { createBlobReader } from "./utils";
+import { createBlobReader } from "./utils";
 
 class StreamBlobResponse {
     constructor(blobData, stream, streamController, options) {
         const blob = BlobManager.createFromOptions(blobData);
         this._blobData = blobData;
         this._blobResponse = new Response(blob, options);
-        // this._streamResponse = new Response(stream, options);
 
-        // return createBlobReader(blob)
-        //     .readAsArrayBuffer()
-        //     .then((arrayBuffer) => {
-        //         this._arrayBufferResponse = new Response(arrayBuffer, options);
-        //         streamController.enqueue(new Uint8Array(arrayBuffer));
-
-        //         return this;
-        //     });
+        return createBlobReader(blob)
+            .readAsArrayBuffer()
+            .then((arrayBuffer) => {
+                this._streamResponse = new Response(stream, options);
+                this._arrayBufferResponse = new Response(arrayBuffer, options);
+                streamController.enqueue(new Uint8Array(arrayBuffer));
+
+                return this;
+            })
+            .catch(() => {
+                return this;
+            });
     }
 
     get bodyUsed() {

src/StreamBlobResponse.js

@@ -10,11 +10,11 @@ function createBlobReader(blob) {
     });
 
     return {
-        readAsArrayBuffer: () => {
+        readAsArrayBuffer: async () => {
             reader.readAsArrayBuffer(blob);
             return fileReaderReady;
         },
-        readAsText: () => {
+        readAsText: async () => {
             reader.readAsText(blob);
             return fileReaderReady;
         },

src/utils.js

@@ -1,9 +1,15 @@
-import "react-native-polyfill-globals/auto";
 import { Platform } from "react-native";
+import { polyfill as polyfillEncoding } from "react-native-polyfill-globals/src/encoding";
+import { polyfill as polyfillReadableStream } from "react-native-polyfill-globals/src/readable-stream";
+import { polyfill as polyfillURL } from "react-native-polyfill-globals/src/url";
 import { test } from "zora";
 import delay from "delay";
 import { Headers, Request, Response, fetch } from "../";
 
+polyfillEncoding();
+polyfillReadableStream();
+polyfillURL();
+
 const BASE_URL = Platform.select({
     android: "http://10.0.2.2:8082",
     ios: "http://localhost:8082",
@@ -21,11 +27,11 @@ function createBlobReader(blob) {
     });
 
     return {
-        readAsArrayBuffer: () => {
+        readAsArrayBuffer: async () => {
             reader.readAsArrayBuffer(blob);
             return fileReaderReady;
         },
-        readAsText: () => {
+        readAsText: async () => {
             reader.readAsText(blob);
             return fileReaderReady;
         },