fix(react-native): prevent app crashes while multipart uploading (#308)

package.json

@@ -15,7 +15,8 @@
   "react-native": {
     "./lib/request/request.node.js": "./lib/request/request.browser.js",
     "./lib/tools/getFormData.node.js": "./lib/tools/getFormData.react-native.js",
-    "./lib/tools/sockets.node.js": "./lib/tools/sockets.browser.js"
+    "./lib/tools/sockets.node.js": "./lib/tools/sockets.browser.js",
+    "./lib/uploadFile/prepareChunks.node.js": "./lib/uploadFile/prepareChunks.react-native.js"
   },
   "scripts": {
     "check-env-vars": "node ./checkvars.js",

src/uploadFile/prepareChunks.node.ts

@@ -0,0 +1,10 @@
+import { sliceChunk } from './sliceChunk'
+
+export function prepareChunks(
+  file: Buffer | Blob,
+  fileSize: number,
+  chunkSize: number
+): (index: number) => Buffer | Blob {
+  return (index: number): Buffer | Blob =>
+    sliceChunk(file, index, fileSize, chunkSize)
+}

src/uploadFile/prepareChunks.react-native.ts

@@ -0,0 +1,24 @@
+import { sliceChunk } from './sliceChunk'
+
+/**
+ * React-native hack for blob slicing
+ *
+ * We need to store references to sliced blobs to prevent source blob from
+ * being deallocated until uploading complete. Access to deallocated blob
+ * causes app crash.
+ *
+ * See https://github.com/uploadcare/uploadcare-upload-client/issues/306
+ * and https://github.com/facebook/react-native/issues/27543
+ */
+export function prepareChunks(
+  file: Buffer | Blob,
+  fileSize: number,
+  chunkSize: number
+): (index: number) => Buffer | Blob {
+  const chunks: (Buffer | Blob)[] = []
+  return (index: number): Buffer | Blob => {
+    const chunk = sliceChunk(file, index, fileSize, chunkSize)
+    chunks.push(chunk)
+    return chunk
+  }
+}

src/uploadFile/sliceChunk.ts

@@ -0,0 +1,11 @@
+export const sliceChunk = (
+  file: Buffer | Blob,
+  index: number,
+  fileSize: number,
+  chunkSize: number
+): Buffer | Blob => {
+  const start = chunkSize * index
+  const end = Math.min(start + chunkSize, fileSize)
+
+  return file.slice(start, end)
+}

src/uploadFile/uploadMultipart.ts

@@ -1,4 +1,5 @@
 import defaultSettings from '../defaultSettings'
+import { prepareChunks } from './prepareChunks.node'
 import multipartStart from '../api/multipartStart'
 import multipartUpload from '../api/multipartUpload'
 import multipartComplete from '../api/multipartComplete'
@@ -38,18 +39,6 @@ export type MultipartOptions = {
   baseCDN?: string
 }
 
-const getChunk = (
-  file: Buffer | Blob,
-  index: number,
-  fileSize: number,
-  chunkSize: number
-): Buffer | Blob => {
-  const start = chunkSize * index
-  const end = Math.min(start + chunkSize, fileSize)
-
-  return file.slice(start, end)
-}
-
 const uploadPartWithRetry = (
   chunk: Buffer | Blob,
   url: string,
@@ -138,27 +127,24 @@ const uploadMultipart = (
     integration,
     retryThrottledRequestMaxTimes
   })
-    .then(({ uuid, parts }) =>
-      Promise.all([
+    .then(({ uuid, parts }) => {
+      const getChunk = prepareChunks(file, size, multipartChunkSize)
+      return Promise.all([
         uuid,
         runWithConcurrency(
           maxConcurrentRequests,
           parts.map((url, index) => (): Promise<MultipartUploadResponse> =>
-            uploadPartWithRetry(
-              getChunk(file, index, size, multipartChunkSize),
-              url,
-              {
-                publicKey,
-                onProgress: createProgressHandler(parts.length, index),
-                cancel,
-                integration,
-                multipartMaxAttempts
-              }
-            )
+            uploadPartWithRetry(getChunk(index), url, {
+              publicKey,
+              onProgress: createProgressHandler(parts.length, index),
+              cancel,
+              integration,
+              multipartMaxAttempts
+            })
           )
         )
       ])
-    )
+    })
     .then(([uuid]) =>
       multipartComplete(uuid, {
         publicKey,