Creating a Blob containing an Image

Question

So in order to upload something into Firebase Storage, the object has to either be a blob or file object.

If a user were to select images from their local storage (in this case it is by default a file object), then those can be uploaded to Firebase Storage quite easily.

If you want upload an image from the web, you have to create a blob object and put the image into the blob.

With that, our team is struggling to create a blob that contains the image from the web to upload to Firebase Storage. How would you put the image in the blob so that in Firebase Storage the image is present?

Note: this is for React so it would be in javascript.

Answer 1

Hmm... for the OSL events app, they somehow got a hold of the 'base64' encoded data for the image. Based on the Firebase docs, I think you could then use putString() directly to upload that, but the OSL team instead converted the base64 data into a Buffer, and then into a File object (maybe a fake File that contains the buffer data)?

Here's a small snippet of code:

        const i = imageData.indexOf('base64,');
        const buffer = Buffer.from(image.slice(i + 7), 'base64');
        const file = new File([buffer], id);

Then they called:

     firebaseImageRef.put(file)

I think the ImageData came from using a react image Resizer (to reduce the size of large photos before uploading, to save bandwidth and storage space). See: https://www.npmjs.com/package/react-image-file-resizer

Comments

Actually, I just checked, and their team repository (with work continued by Michael Wardach this year) is PUBLIC, so you can browse all of their source code.

Here's the file I was looking at:

https://github.com/augustanacsc490spring2019/OSL-Calendar-Web-App/blob/master/src/AddEvent.js

(I'm not sure this was the best way to upload an image to firebase, but they got it to work!)