1

I'm following the example here to store and retrieve an image blob on Firestore, but I have trouble retrieving:

const firebase_blob = doc.get('img');
const uint8_array = firebase_blob.toUint8Array();

The following error appears when I run the code:

firebase_blob.toUint8Array is not a function at UserManager.js:91:59

Using console.log(firebase_blob); I get the following:

{
    "_byteString": {
        "binaryString": "ÿØÿà\u0000\u0010JFIF\u0000\u0001\u0001\u0000\u0000\u0001\u0000\u0001\u0000\u0000ÿâ\u0001ØICC_PROFILE\u0000\u0001\u0001\u0000\u0000\u0001È\u0000\u0000\u0000\u0000\u00040\u000(...truncated)"
    }
}

Can anyone kindly point out my mistake? Is the toUint8Array deprecated in favour of another function? Thanks in advance.

bot1131357
  • 877
  • 8
  • 25
  • Could you include a minimal and reproducible code that includes how you store the image Blob on Firestore and if possible a screenshot of the data from your Firestore database with the reference from your snippet above to make sure that you're saving the Blob correctly. That usually happens when the type of data is not a Blob. Here's a sample of `console.log()` from a correct Blob: `Blob { _delegate: Bytes { _byteString: ByteString { binaryString: 'HI' } } }`. There's a difference between your result and my sample. – Marc Anthony B Feb 24 '23 at 19:40
  • Thanks. It might just be that my upload wasn't executed correctly. I used `Bytes.fromUint8Array()` based on the API reference but I really wasn't sure. I'll post the upload code when I get back tonight. Cheers. – bot1131357 Feb 25 '23 at 02:55

1 Answers1

0

Update

When editing reproducible code as suggested by marc-anthony-b, I realise that uploading to Firebase Cloud Functions changes the blob.

Here is data uploaded directly using Firebase updateDoc:

Data uploaded using Firebase updateDoc becomes a blob

And here is data uploaded through Firebase cloud functions:

The same does not happen with cloud functions

Although the type was changed, I realised the binary data was still accessible. Suggested by qrsngky , I retrieved the Uint8Array using this code:

let typed_array = Uint8Array.from(img_data, e => e.charCodeAt(0) );

Once I have the Uint8Array, I was able to get the blob_url like so:

const blob = new Blob([typed_array]);
const blob_url = URL.createObjectURL(blob);

It would've been a simpler if I could just use toUint8Array(), but I'll leave this problem for now. Thanks!

bot1131357
  • 877
  • 8
  • 25