DOMException Error when splitting large file blob into chunks

Question

can someone please help me to debug this function

const chunkify = async (file: Blob) => {
  const totalSize = file.size;
  const chunkSize = 1024 * 1024 * 100; // 100MB

  const chunks = [] as Uint8Array[];
  const amountOfChunks = Math.ceil(totalSize / chunkSize);

  console.log("Total blob size: ", totalSize);
  for (let index = 0; index < amountOfChunks; index++) {
    const start = index * chunkSize;
    const end = (index + 1) * chunkSize;

    console.log("Start point: ", start);
    console.log("End point: ", end);
    const chunk = await file.slice(start, end).arrayBuffer();
    chunks.push(new Uint8Array(chunk));
  }

  return chunks;
};

As an overview, the function above assuming a 0.97 GB file is provided through using Android WebView (with Ionic & Capacitor), executes approximately 7 times (actually 6, because on the 7th iteration the code stops at the last console.log() before returning the error below)

Uncaught (in promise) DOMException: The requested file could not be read, typically due to permission problems that have occurred after a reference to a file was acquired.

PS: I tried asking Bard this but and it suggested replacing

const end = (index + 1) * chunkSize;

with

const end = Math.min(totalSize, (index + 1) * chunkSize);

but that didn't seem to help.

Answer 1

So, kind of feeling dumb for not thinking of this but when I reduce the chunkSize variable to 10 MB (1024 * 1024 * 10) it works.

JavaScript is weird

PS: Other solutions are also welcome 😃

Edit: I later edited the function to calculate the chunkSize based on the - blob size / video duration