fix(react-native): dispose blob slice chunks after consume

Author: nd0ut

packages/upload-client/src/uploadFile/prepareChunks.browser.ts

@@ -7,6 +7,8 @@ export const prepareChunks: PrepareChunks = async (
   fileSize: number,
   chunkSize: number
 ) => {
-  return (index: number): BrowserFile =>
-    sliceChunk(file as BrowserFile, index, fileSize, chunkSize)
+  return {
+    getChunk: (index: number): BrowserFile =>
+      sliceChunk(file as BrowserFile, index, fileSize, chunkSize)
+  }
 }

packages/upload-client/src/uploadFile/prepareChunks.node.ts

@@ -7,6 +7,8 @@ export const prepareChunks: PrepareChunks = async (
   fileSize: number,
   chunkSize: number
 ) => {
-  return (index: number): NodeFile =>
-    sliceChunk(file as NodeFile, index, fileSize, chunkSize)
+  return {
+    getChunk: (index: number): NodeFile =>
+      sliceChunk(file as NodeFile, index, fileSize, chunkSize)
+  }
 }

packages/upload-client/src/uploadFile/prepareChunks.react-native.ts

@@ -1,5 +1,5 @@
 import { isReactNativeAsset } from '../tools/isFileData'
-import { SupportedFileInput } from '../types'
+import { Sliceable, SupportedFileInput } from '../types'
 import { getBlobFromReactNativeAsset } from '../tools/getBlobFromReactNativeAsset'
 import { sliceChunk } from './sliceChunk'
 import { PrepareChunks } from './types'
@@ -19,17 +19,26 @@ export const prepareChunks: PrepareChunks = async (
   fileSize: number,
   chunkSize: number
 ) => {
-  let blob: Blob
+  let blob: Sliceable
   if (isReactNativeAsset(file)) {
     blob = await getBlobFromReactNativeAsset(file)
   } else {
-    blob = file as Blob
+    blob = file as Sliceable
   }
 
-  const chunks: Blob[] = []
-  return (index: number): Blob => {
-    const chunk = sliceChunk(blob, index, fileSize, chunkSize)
-    chunks.push(chunk)
-    return chunk
+  const chunks: Set<Sliceable> = new Set()
+  return {
+    getChunk: (index: number): Sliceable => {
+      const chunk = sliceChunk(blob, index, fileSize, chunkSize)
+      chunks.add(chunk)
+      return chunk
+    },
+    /**
+     * Remove references to all the chunks from the memory to make able
+     * react-native to deallocate it
+     */
+    disposeChunks: () => {
+      chunks.clear()
+    }
   }
 }

packages/upload-client/src/uploadFile/types.ts

@@ -28,4 +28,7 @@ export type PrepareChunks = (
   file: SupportedFileInput,
   fileSize: number,
   chunkSize: number
-) => Promise<(index: number) => Sliceable>
+) => Promise<{
+  getChunk: (index: number) => Sliceable
+  disposeChunks?: () => void
+}>

packages/upload-client/src/uploadFile/uploadMultipart.ts

@@ -146,27 +146,32 @@ export const uploadMultipart = async (
     metadata
   })
     .then(async ({ uuid, parts }) => {
-      const getChunk = await prepareChunks(file, size, multipartChunkSize)
-      return Promise.all([
-        uuid,
-        runWithConcurrency(
-          maxConcurrentRequests,
-          parts.map(
-            (url, index) => (): Promise<MultipartUploadResponse> =>
-              uploadPart(getChunk(index), url, {
-                publicKey,
-                contentType,
-                onProgress: createProgressHandler(parts.length, index),
-                signal,
-                integration,
-                retryThrottledRequestMaxTimes,
-                retryNetworkErrorMaxTimes
-              })
-          )
+      const { getChunk, disposeChunks } = await prepareChunks(
+        file,
+        size,
+        multipartChunkSize
+      )
+      await runWithConcurrency(
+        maxConcurrentRequests,
+        parts.map(
+          (url, index) => async (): Promise<MultipartUploadResponse> => {
+            const chunk = getChunk(index)
+            return uploadPart(chunk, url, {
+              publicKey,
+              contentType,
+              onProgress: createProgressHandler(parts.length, index),
+              signal,
+              integration,
+              retryThrottledRequestMaxTimes,
+              retryNetworkErrorMaxTimes
+            })
+          }
         )
-      ])
+      ).finally(() => disposeChunks?.())
+
+      return uuid
     })
-    .then(([uuid]) =>
+    .then((uuid) =>
       multipartComplete(uuid, {
         publicKey,
         baseURL,