I am getting:
Possible Unhandled Promise Rejection (id: 0):
TypeError: undefined is not an object (evaluating ‘ref._location’)`
I even change ref as
import { ref as refstore, uploadBytesResumable, getDownloadURL } from "firebase/storage";
So that don’t collide with each other. and changes images to blob. I am stuck here not sure what to do next.
const uploadImage = async () => {
const blobimage = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function () {
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", imageUri, true);
xhr.send(null);
})
const metadata = {
contentType: 'image/jpeg'
};
// I think something is wrong in the below line **storageRef** <------------
const storageRef = refstore(storage,`images/${Date.now()}`);
const uploadTask = uploadBytesResumable(storageRef, blobimage, metadata);
uploadTask.on('state_changed',
(snapshot) => {
const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
switch (snapshot.state) {
case 'paused':
console.log('Upload is paused');
break;
case 'running':
console.log('Upload is running');
break;
}
},
);
};
2
Answers
Never forget to use {} at import while importing from config file.
You need to define storage variable with getStorage pre-built function.
like this :
After initializing Firebase storage, you can pass the storage object to refstore: