I am using react js to upload images in firebase alongside its post contents so far I have managed to upload an image and its doc but the problem is when I try to put image URL along doc it says the image does not exist and when I check back in my console account I find the uploaded image
down below is my upload codes
const createPost = async () => {
if(image == null){
const cover = "default";
await addDoc(postsCollectionRef, {
title,
postContent,
created_at,
cover,
author: {name: auth.currentUser.displayName, id: auth.currentUser.uid}
});
}else{
const cover = addOn+image.name;
const storage = getStorage();
var storageRef = await ref(storage, `images/${cover}`);
const upload = uploadBytesResumable(storageRef,image,image);
upload.on("state_changed" , alert("success") , alert);
await getDownloadURL(storageRef).then(function(url){
console.log(url);
addDoc(postsCollectionRef, {
title,
postContent,
created_at,
cover: {cover, url},
author: {name: auth.currentUser.displayName, id: auth.currentUser.uid}
});
});
}
navigate("/");};
If I can get relevant examples it will be very helpful some says that the problem is that i am calling url before the image is not upload so i tried to add await but still does not work
Thanksful to image url that i saw where the problem was it was so simple as I was not considering code flow arrangement
if you come across this problem know that you should take image url inside the then() function as you can see the chane in my codes below
else{
const cover = addOn+image.name;
const storage = getStorage();
var storageRef = await ref(storage, `images/${cover}`);
const upload = uploadBytesResumable(storageRef,image,image).then(
() =>{
getDownloadURL(storageRef).then(function(url){
console.log(url);
addDoc(postsCollectionRef, {
title,
postContent,
created_at,
cover: {cover, url},
author: {name: auth.currentUser.displayName, id: auth.currentUser.uid}
});
}
);
});
}
Thank you very much for the participating