I have a simple file chunking system to upload data to a server via many chunks, to do this I delegate the splitting and uploadin task to a dedicated component... However when passing the received Blob, from user, to my dedicated component, the prop in that component doesn't seem to contain anything... Indeed the Blob slice() method throws an error complaining it is an illegal action to slice an empty blob... Also calling .text() on the blob object gives an empty string.

Here a simplified version:

const Uploader = ({ fileBlob }) => {
     
     useEffect(() => {
          fileBlob.text().then(textContent => console.log(textContent)); // Logs an empty string
          let chunk = fileBlob.slice(0, fileBlob.size() / 2); // Throws
     });

     return (<some stuff />)
}

const BlobFromUser = () => {
    const fileUpload = (fileBlob) => {
         fileBlob.text().then(textContent => console.log(textContent)); // Logs the actual content

         notify(<Uploader fileBlob={fileBlob} />);
    }

    return (<file upload user form triggers fileUpload()/>)
}

Also, reading .size() from Uploader yields the expected size, but the blob doesn't contain anything.