javascript - Firebase Storage - Wait till all upload tasks are completed before executing function - Stack Overflow

admin管理员组

文章数量:1390555

I'm using the following code to upload one or multiple files to Firebase Storage. When the upload is pleted the downloadURL is logged in the console.

I would like to execute another function when all the files are uploaded, outside the forEach function. How can I print the console log when all the uploads tasks are pleted?

onSubmit = e => {
    e.preventDefault();
    const { files } = this.state;

    files.forEach(file => {
        const uploadTask = Storage.ref(`files/${file.name}`).put(file);

        uploadTask.on('state_changed', snapshot => {
            const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log(progress);
        }, error => { console.log(error) }, () => {
            uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
                console.log(downloadURL);
            });
        });
    });

    //Wait till all uploads are pleted
    console.log('all uploads plete');
}

I'm using the following code to upload one or multiple files to Firebase Storage. When the upload is pleted the downloadURL is logged in the console.

I would like to execute another function when all the files are uploaded, outside the forEach function. How can I print the console log when all the uploads tasks are pleted?

onSubmit = e => {
    e.preventDefault();
    const { files } = this.state;

    files.forEach(file => {
        const uploadTask = Storage.ref(`files/${file.name}`).put(file);

        uploadTask.on('state_changed', snapshot => {
            const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log(progress);
        }, error => { console.log(error) }, () => {
            uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
                console.log(downloadURL);
            });
        });
    });

    //Wait till all uploads are pleted
    console.log('all uploads plete');
}

• javascript
• reactjs
• firebase
• firebase-storage

Share Improve this question Follow asked Jul 17, 2018 at 3:25 ThoreThore 1,86822 gold badges3131 silver badges6565 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

UploadTask objects behave just like promises, as they have then() and catch() methods. So, you can collect them all into an array and use Promise.all() to generate a another promise that resolves when all the uploads are plete.

const promises = [];
files.forEach(file => {
    const uploadTask = Storage.ref(`files/${file.name}`).put(file);
    promises.push(uploadTask);

    uploadTask.on('state_changed', snapshot => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log(progress);
    }, error => { console.log(error) }, () => {
        uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
            console.log(downloadURL);
        });
    });
});

Promise.all(promises).then(tasks => {
    console.log('all uploads plete');
});

本文标签： javascriptFirebase StorageWait till all upload tasks are completed before executing functionStack Overflow