0

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.

Roberto Montalti
  • 121
  • 6
  • [`fileBlob.text()` is asynchronous](https://developer.mozilla.org/en-US/docs/Web/API/Blob/text) but you're accessing its contents synchronously in the next line. Add a `console.log()` by `let chunk` and you'll see that the `console.log` is printing before the one printing the `textContent`. Simplest solution is to use `await`. For example: `async () => { await fileBlob.text().then(textContent => console.log(textContent)); let chunk = fileBlob.slice(0, fileBlob.size() / 2); // Throws }` – Ruan Mendes Apr 11 '22 at 12:32
  • See https://www.delftstack.com/howto/javascript/read-text-file-in-javascript/ – Ruan Mendes Apr 11 '22 at 12:36
  • Yes, in this scenario I'm just trying to print out the text content in the two different cases, I don't really care on when that happens. What you are pointing out doesn't really open any path to a viable solution. I'm trying to figure out why that data is magically gone. Even without calling text() before `let chunk` the same behavior occurs. @JuanMendes – Roberto Montalti Apr 11 '22 at 12:41
  • Calling await doesn't make any sense... I don't want to await .text(), I just tell it "when you complete the text conversion, print out the content", this is done via the .then() method on any js promise. This is not the problem, my problem is the Blob object losing data when passed as a react prop. @JuanMendes – Roberto Montalti Apr 11 '22 at 12:49
  • Again: the problem is [Blob.slice()](https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice) throwing a `TypeError: Illegal Invocation` when a blob is passed as a react prop. – Roberto Montalti Apr 11 '22 at 12:51
  • did you try it? – Ruan Mendes Apr 11 '22 at 13:00
  • Yes, actually, .text() wasn't even there initially, I added it afterwards to confirm that the data wasn't available inside ``. .text() simply isn't part of the problem – Roberto Montalti Apr 11 '22 at 13:06

0 Answers0