Blob URL upload to firebase storage

Question

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!

bnexd · Accepted Answer · 2020-01-29 14:02:37Z

4

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.

answered Jan 29, 2020 at 14:02

bnexd

1714 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nathan Sutherland Over a year ago

where are you getting the fileName from?

Jejouz · Accepted Answer · 2020-01-29 13:15:00Z

2

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
}

answered Jan 29, 2020 at 13:15

Jejouz

1796 bronze badges

2 Comments

bnexd Over a year ago

Thanks for your answer. I'm still getting the error. The return is a Promise, can this be the reason for the error?

Jejouz Over a year ago

The fetch request is asynchronous, you need to wait for it to be resolved before uploading it. I never used this plugin but there seems to be a straightforward way to retrieve a blob instead of a url on the documentation: return new Promise((resolve, reject) => { canvas.toBlob(blob => { blob.name = fileName; resolve(blob); }, 'image/jpeg', 1); });

Collectives™ on Stack Overflow

Blob URL upload to firebase storage

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related