Unhandled promise rejection: undefined is not a function on Firebase reference - reactjs

Question

I am getting unhandled promise rejection maybe because of ref is not passing please review this if possible. I'll be thankful to you.
[Unhandled promise rejection: TypeError: undefined is not a function (near '...ref.on...')]
In upload file code is distributed based on their functionality:
import firebase from '../../firebase'
const getLocalPath = async (uri)=>{
const response = await fetch(uri);
const blob = await response.blob();
return blob
}
const upload = async (blob, className,acc)=>{
const ref = await firebase.storage().ref(`/${className}`).child(`/${acc}`).put(blob)
console.log('trigger')
console.log('ref', ref)
return ref
};
const getLink = async (ref, className, acc)=>{
await ref.on(
"state_changed",
(snapshot) => {},
(err) => {
console.log(err);
},
() => {
storage
.ref(`/${className}`)
.child(`/${acc}`)
.getDownloadURL()
.then(async (url) => {
// setURL(url)
console.log(url)
return url
});
}
);
}
export {getLink, getLocalPath}
export default upload
This is where I use it:
const Publish= async ()=>{
setLoading(true)
console.log(id)
var count = 1
const blob = await getLocalPath(images[0])
const ref = await upload(blob, `serviceImages/${id}`, `${count}`, setURL)
const uri = await getLink(ref, `serviceImages/${id}`, `${count}` )
console.log(uri)
setLoading(false)
}

Answer 1

firebase.storage.Reference#put returns a firebase.storage.UploadTask. This UploadTask class does have a UploadTask#on() method, BUT, because you used await, you actually get a UploadTaskSnapshot object instead which is the result of UploadTask#then().
So to return the UploadTask instead of the UploadTaskSnapshot, omit the await here.
const upload = (blob, className, acc) => {
return firebase.storage()
.ref(`/${className}`)
.child(`/${acc}`)
.put(blob)
};
But if you want to wait for the upload, just await the UploadTask when you consume the code.
const blob = await getLocalPath(images[0])
const uploadTask = upload(blob, `serviceImages/${id}`, `${count}`, setURL); // note no await here
const snapshot = await uploadTask; // wait for upload to finish
const uri = await getLink(uploadTask, `serviceImages/${id}`, `${count}`)
You could also do this:
const blob = await getLocalPath(images[0])
const uploadTask = upload(blob, `serviceImages/${id}`, `${count}`, setURL);
const [snapshot, uri] = await Promise.all([
uploadTask,
getLink(uploadTask, `serviceImages/${id}`, `${count}`)
]);
You can also simplify getLink to just:
const getLink = async (uploadTask) => {
return uploadTask
.then((snapshot) => snapshot.ref.getDownloadURL());
}
which leads to:
const blob = await getLocalPath(images[0])
const uploadTask = upload(blob, `serviceImages/${id}`, `${count}`, setURL);
const [snapshot, uri] = await Promise.all([
uploadTask,
getLink(uploadTask)
]);
As a side note, try to avoid using await if you are just going to return the value on the next line. It just adds an unnecessary step as you can see here:
const getLocalPath = async (uri)=>{
const response = await fetch(uri);
const blob = await response.blob();
return blob
}
effectively becomes
const getLocalPath = async (uri) => {
return fetch(uri)
.then(response => response.blob())
.then(blob => blob); // <- this line does nothing interesting
}
So just write it as this instead:
const getLocalPath = async (uri) => {
const response = await fetch(uri);
return response.blob();
}