File Corruption After Chunking & Uploading via SharePoint API using Power Automate

Question

I’m facing an issue where files are being corrupted after chunking them and uploading them to SharePoint Online using the startUpload, continueUpload, and finishUpload API. The setup is as follows:

Components:

A PowerApps PCF component that slices the file into chunks using Filepong plugin. PowerAutomate flow that processes the binary data and sends HTTP requests to SharePoint to upload the chunks. Despite the chunks being correctly processed and sent to SharePoint, the file ends up corrupted when reassembled. I’ve verified that the buffer sizes match what I expect, but something goes wrong during the upload process.

Has anyone faced similar issues with file uploads using this method, or can offer any guidance on how to resolve the corruption?

Here's the Code:

let offset = 0
let length = this.props.chunkSize
let uniqueID = this.generateUniqueID();
let chunkNumber = 0;
let size = file.size; // Original binary size
console.log("File size", size);
let fr = new FileReader();
fr.readAsArrayBuffer(file);  
fr.onload = async (evt: any) => {
  const processChunks = async () => {
    return new Promise<void>(async (resolve, reject) => {
      try {
        while (offset_file < size) {  
          // If we are dealing with the final chunk, we need to know...  
          if (offset_file + length > size) {  
            length = size - offset_file;  
          }
          
          let arrayBuffer = evt.target.result.slice(offset_file, offset_file + length);                 
          console.log("offset", offset_file, "buffer size", arrayBuffer.byteLength, "sp offset", offset);
          
          // Upload the current chunk
          offset = await this._uploadChunk(size, filename, chunkNumber, offset_file, offset_file + length, uniqueID, arrayBuffer);
          
          // Move to the next chunk
          offset_file += length;
          chunkNumber++;
          currentChunk++;
          
          // Update the upload progress
          this.setState({ uploadProgress: currentChunk / totalChunks });
        }
        resolve(); // Resolve once all chunks are uploaded
      } catch (error) {
        reject(error); // Handle errors
      }
    });
  };

  try {
    // Wait for the chunks to finish uploading
    await processChunks();
    console.log("All chunks have been uploaded.");
    filesUploaded += 1;
    this.localReturnFileCount(this.state.files.length);
    success();
  } catch (error) {
    console.error("Error during chunk upload:", error);
  }
};

private generateUniqueID() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0,
            v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
  }

Power Automate Flow Screenshots

Additional Details:

• The file is split into chunks in the PCF component and sent to Power Automate, where the chunks are uploaded via the SharePoint API.
• The file gets corrupted despite matching buffer sizes during the chunking process.
• But also the files after the process finish is bigger than the original size.

Any help or suggestions would be greatly appreciated! 🙏

Thanks in advance!