CODEWITHSUNDEEP
javascriptreactjsfirebasegoogle-cloud-storageblob
bnexd
bnexd

Reputation: 161

Blob URL upload to firebase storage

I'm using "react-image-crop" (https://github.com/DominicTobias/react-image-crop) for cropping an image and then upload it to Firebase storage. The response from "react-image-crop" is a blob:URL in my state. When I call:

var storageRef = firebase.storage().ref();
        var mountainImagesRef = storageRef.child(
            "images/" + auth.uid + "/avatar.jpg"
        );
        mountainImagesRef.put(file).then(function(snapshot) {...

I get the error:

Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.

I know that I need to pass a blob or file and not the URL but how can I fix this?

Thanks for your help!

Upvotes: 1

Views: 2992

Answers (2)

bnexd
bnexd

Reputation: 161

I fixed that, by editing the returned Promise of "react-image-crop". Change return Promise to:

return new Promise((resolve, reject) => {
            canvas.toBlob(blob => {
                if (!blob) {
                    //reject(new Error('Canvas is empty'));
                    console.error("Canvas is empty");
                    return;
                }
                blob.name = fileName;
                console.log(blob);
                resolve(blob);
            }, "image/jpeg");
        });

Now you will get a blob returned and not a blob url.

Upvotes: 4

Jejouz
Jejouz

Reputation: 179

You can retrieve the blob from an image URL through a fetch request:

async blobFromURL(url) {
 blob = await fetch(this.imageUrl).then(r => r.blob());
 return blob
}

Upvotes: 2

Related Questions