I'm currently working on a function that involves uploading multiple images to Firebase, storing the returned URLs in an object, and then uploading that object to my Cloud Firestore database. However, my understanding of async/await and promises is limited, so any assistance would be greatly appreciated.
Essentially, I want the uploadImages() function to complete its execution before triggering the uploadData() function, which will further call the saveIssue() function upon form submission.
Below is the code snippet I am dealing with:
saveIssue() {
this.uploadImages();
this.uploadData();
},
uploadData() {
let self = this;
db.collection("issues")
.add(self.issue)
.then(docRef => {
self.$router.push({
name: "ReportPage",
params: { issueId: docRef.id }
});
})
.catch(error => {
console.error(error);
});
},
uploadImages() {
const storageRef = storage.ref();
let self = this;
this.imagePreviews.forEach(image => {
let imageName = uuidv1();
let fileExt = image.fileName.split(".").pop();
let uploadTask = storageRef
.child(`images/${imageName}.${fileExt}`)
.putString(image.base64String, "data_url");
uploadTask.on("state_changed", {
error: error => {
console.error(error);
},
complete: () => {
uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
self.issue.images.push(downloadURL);
});
}
});
});
},