Unsupported field value: undefined,Function addDoc() called with invalid data - reactjs

Question

so here I want to store the array of image URL from the firebase storage in firestore. I am getting an error of undefined as my ImageUrl is undefined. please help me to solve this.The images are stored on cloud storage.
The code below shows my onSubmit function where a copy of the formdata is created.I have tried with and without '.then' and both gives me this error
const onSubmit = async (e) => {
e.preventDefault();
setLoading(true);
if (discountedPrice >= regularPrice) {
setLoading(false);
toast.error("Discounted price should be less than regular price");
}
console.log(formData);
if (images.length > 6) {
setLoading(false);
toast.error("Max of 6 images");
}
let geolocation = {};
let location;
// if (address != null) {
try {
const response = await fetch(
`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${process.env.React_App_YOUR_GOOGLE_API_KEY}`
);
const data = await response.json();
console.log(data);
geolocation.lat = data.results[0].geometry.location.lat;
geolocation.lng = data.results[0].geometry.location.lng;
console.log(
"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
);
console.log(geolocation.lat);
console.log(data.status);
location =
data.status == "ZERO_RESULTS"
? undefined
: data.results[0].formatted_address;
if (location == undefined || location.includes("undefined")) {
setLoading(false);
toast.error("area does not match");
}
} catch (error) {
toast.error("area does not match");
}
//s store image to firebase
const storeImage = async (image) => {
return new Promise((resolve, reject) => {
const storage = getStorage();
const fileName = `${auth.currentUser.uid}-${image.name}-${uuidv4()}`;
const storageRef = ref(storage, "images/" + fileName);
const uploadTask = uploadBytesResumable(storageRef, image);
uploadTask.on(
"state_changed",
(snapshot) => {
// Observe state change events such as progress, pause, and resume
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
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;
}
},
(error) => {
// Handle unsuccessful uploads
reject(error);
},
() => {
// Handle successful uploads on complete
// For instance, get the download URL: https://firebasestorage.googleapis.com/...
getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
resolve(downloadURL);
console.log("File available at", downloadURL);
});
}
);
});
};
const imageUrls = await Promise.all(
[...images].map((image) => {
storeImage(image);
})
)
.then(() => {
console.log("urlready " + imageUrls);
uploadingListings(imageUrls);
})
.catch((error) => {
console.log(error);
setLoading(false);
toast.error("Couldn't upload image");
return;
});
const uploadingListings = async (imageUrls) => {
console.log(imageUrls);
const formDataCopy = {
...formData,
imageUrls,
geolocation,
timestamp: serverTimestamp(),
};
formDataCopy.location = address;
delete formDataCopy.address;
delete formDataCopy.images;
!formDataCopy.offer && delete formDataCopy.discountedPrice;
console.log("this is" + formDataCopy);
const docRef = await addDoc(
collection(db, "listings"),
formDataCopy
setLoading(false);
toast.success("Created a listing");
navigate(`/category/${formDataCopy.type}/${docRef.id}`);
});
};

Answer 1

This is how I fixed it.
Realized I wasn't returning the url to imageUrls.
And also found it not helpful using the .then with imageUrls.
const imageUrls = await Promise.all(
[...images].map((image) => {
return storeImage(image);
})
)
// .then(() => {
// console.log("urlready " + imageUrls);
// return uploadingListings(imageUrls);
// })
.catch((error) => {
console.log(error);
setLoading(false);
toast.error("Couldn't upload listing");
return;
});
console.log("urlready " + imageUrls);
const formDataCopy = {
...formData,
imageUrls,
geolocation,
timestamp: serverTimestamp(),
};
console.log(formDataCopy);
formDataCopy.location = address;
delete formDataCopy.address;
delete formDataCopy.images;
!formDataCopy.offer && delete formDataCopy.discountedPrice;
console.log("this is" + formDataCopy);
const docRef = await addDoc(
collection(db, "listings"),
formDataCopy
)
console.log(docRef);
setLoading(false);
toast.success("Created a listing");
navigate(`/category/${formDataCopy.type}/${docRef.id}`);
};