Currently, I am working on a website that allows users to create new projects by filling out a form with all the necessary project information. Within this form, there is a file input field where users can upload images and documents. I have successfully implemented code that loops through all the files and stores them in Firebase Storage. However, I am encountering an issue when trying to populate the document fields with this data.
I attempted to solve this problem by using Object.assign() within the Firebase .update() method. Unfortunately, whenever this code snippet runs, it throws the following error:
Error: Function DocumentReference.update() called with invalid data. Unsupported field value: a custom File object (found in field image)
After some investigation, I realized that the issue lies with the Object.assign() function as the code works fine without it. If anyone could provide assistance in resolving this issue, I would greatly appreciate it.
The part of the code causing the error is as follows:
firestore.collection('projects').doc(res.id)
.update(Object.assign(this.values, {
createdAt: new Date(),
updatedAt: new Date(),
createdBy: '/users/' + firebaseApp.auth().currentUser.email,
approved: false
}))
.then(res => {
console.log(res)
this.$toast.success('Project changes saved', { icon: 'mdi-check-bold' })
}).catch((err) => {
this.$toast.error(err.message, { icon: 'mdi-alert-circle' })
console.log(err)
})
Below is the function that I call upon submission:
submit () {
this.overlay = true
firestore.collection('projects').add({})
.then((res) => {
Promise.all(
fileKeys.map((key, index) => {
return new Promise((resolve, reject) => {
if (!this.values[key]) {
resolve(this.values[key])
} else {
// Handling file uploads
}
})
})
)
firestore.collection('projects').doc(res.id).update(Object.assign(this.values, { createdAt: new Date(), updatedAt: new Date(), createdBy: '/users/' + firebaseApp.auth().currentUser.email, approved: false }))
.then(res => {
console.log(res)
this.$toast.success('Project changes saved', { icon: 'mdi-check-bold' })
}).catch((err) => {
this.$toast.error(err.message, { icon: 'mdi-alert-circle' })
console.log(err)
})
}).catch((err) => {
console.log(err)
console.log('error')
})
},