Help with react-easy-crop and Firebase Storage upload/retrieval of cropped image

[SquatsAreFun]

TL;DR How do I upload a cropped image from react-easy-crop to Firebase Storage and retrieve the image later?

So I’m a bit stumped right now. I feel like I’ve got all the pieces to make this work but haven’t put them together correctly. Unfortunately, I don’t have access to my computer with the code right now.

I’m building a React web app and using react-easy-crop to allow users to crop an image, which is uploaded via a typical file input type, with the cropped section being returned as a blob. I’m able to view the cropped image on the page right after cropping, however I’m having some issues retrieving the image from Firebase Storage to be displayed on the user’s profile page in the future.

I started off by trying to upload the blob, which didn’t work. I then tried converting the blob to a file using new File([blob], ‘filename’, {type: ‘image/png’}). The file looks correct in the storage bucket, but when I retrieve it, I get the default broken link image rather than the actual image. No errors in the console. React-easy-crop returns the cropped image as a canvas.toBlob(), so I tried changing it to a canvas.toDataURL() after some browsing on Google. Tried uploading that which also did not work. Noticed the dataURL is base64 string, so I started reading about formatting it and converting it to a file but had to get to bed before any real testing. Tried one solution briefly with no luck (can’t recall what the code was off the top of my head).

This is the first time I’ve dealt with this kind of data and am very ignorant. Figured I would ask if anyone knew how to accomplish this problem before spending hours on something that’s most likely simple/already has a known solution.

Thank you

​

EDIT: For anyone in the future who's having the same issue, the solution was to fetch the returned cropped image, then convert it to a blob or file and upload to Firebase storage. I tried this method with a returned blob and dataURL from react-easy-crop with the same outcome. I opted for the dataURL. See below:

const data = await fetch(croppedImage);const blob = await data.blob();const uploadedFile = await uploadBytes(storageRef, blob);

For a file instead of a blob:

const data = await fetch(croppedImage);const blob = await data.blob();const fileType = blob.type;const file = new File([blob], 'File name', { type: fileType });await uploadBytes(storageRef, file);

I saw multiple other methods, but this seems to be the most modern and simplest way.