I've been working on some code to upload multiple photos to a server.
The code can be broken down into three main parts:
First, capturing images from the input file and storing them in a variable until the uploadPictures() method is called.
Next, uploading the photos and saving the URLs in an array for later use.
Finally, after the uploads are completed and we have the necessary links, updating a specific document in the Firestore database.
The problem I'm encountering is that the code functions smoothly for the first two phases. However, I'm struggling to make it work seamlessly with either async/await or Promises.
async uploadPictures() {
let loop = new Promise( result => {
this.files.forEach((file, index) => {
let path: string = `items/${Date.now()}_${this.files[index].name}`;
let ref = this.storage.ref(path);
ref.put(file).then(snapshot => {
snapshot.ref.getDownloadURL().then(downloadLink => {
this.url.push(downloadLink);
console.log('Image is uploaded successfully and available at: ' + downloadLink);
})
});
});
}).then( () => {
console.log('hello from here!');
console.log(this.url);
this.firestore.collection('items').doc(this.itemId).update({ pics: this.url });
})
}
Your insights or suggestions would be greatly appreciated!