when I submit the form to store the data on the firestore db I got this error message: image 1
the value of images on the state is showen like this : image 2
I find the same question posted by others but all the answers there is not working for me Here is my code :
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) => {
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
default:
break
}
},
(error) => {
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)
})
}
)
})
}
const imgUrls = await Promise.all(
[...images].map((image) => storeImage(image))
).catch(() => {
setLoading(false)
toast.error('Images not uploaded')
return
})
const formDataCopy = {
...formData,
imgUrls,
geolocation,
timestamp: serverTimestamp(),
}
formDataCopy.location = address
delete formDataCopy.images
delete formDataCopy.address
!formDataCopy.offer && delete formDataCopy.discountedPrice
const docRef = await addDoc(collection(db, 'listings'), formDataCopy)
setLoading(false)
toast.success('Listing saved')
navigate(`/category/${formDataCopy.type}/${docRef.id}`)
}