I’m using React.js to create an application that would take a photo and upload it to Firebase Storage. I am using the react-webcam library, which uses this command to take a photo:
const ImageSrc = webcamRef.current.getScreenshot();
This is how I tried uploading the photo to Storage:
storage.ref(`/images`).put(imageSrc) .on("state_changed" , alert("success") , alert)
However, the file that is uploaded is undefined (no photo).
I tried to construct an URL of the photo using blob:
const imageUrl = window.URL.createObjectURL(new Blob(webcamRef.current.getScreenshot()))
But I get this error: >Failed to construct ‘Blob’: The provided value cannot be converted to a sequence.
In the library it is stated that getScreenshot – Returns a base64 encoded string of the current webcam image. So, I tried to use the atob command, but I get the error: Failed to execute ‘atob’ on ‘Window’: The string to be decoded is not correctly encoded.
Does anyone know how I could upload the image to Firebase Storage? Any help would be appreciated!
Instead of blob, try using
putString() command like this:
const task = firebase.storage().ref(`/images`).putString(imageSrc, 'data_url')