Vuejs + Firebase Storage upload multiply images into Firebase Storage and push all downloadURL into Firestore

Question

I want to upload more images into the Firebase Storage and when I click on upload I want that all the downloadURL of the images send to the Cloud Firestore as in a array.

Right now, I can upload one image to the Firebase Storage and the downloadURL is on my Firestore.

The template code

<v-layout>
    <v-flex xs12 sm12 md12 xl12>
        <div class="choosePhoto">
            <v-btn @click="click1">choose photo</v-btn>
        </div>
    </v-flex>
</v-layout>

<v-layout wrap class="justify-center">
    <v-flex xl6 >
        <input type="file" ref="input1" style="display: none" @change="previewImage" accept="image/*" multiple>
    </v-flex>
</v-layout>

<v-layout>
    <v-flex xl12 v-if="imageData != null">                     
        <v-carousel v-model="model">
            <v-carousel-item>
                <v-sheet height="100%" tile>
                    <v-row class="fill-height" align="center" justify="center">
                        <div class="display-3" align="center" justify="center">
                            <img class="preview" height="268" width="80%" :src="img1">
                        </div>
                    </v-row>
                </v-sheet>
            </v-carousel-item>
        </v-carousel>
    </v-flex>    
</v-layout> 

<v-layout wrap class="justify-center">
    <v-flex xl2>
        <v-btn color="pink" @click="create">upload</v-btn>
    </v-flex>
</v-layout>

My vue js code

data() {
    return {
        img1: '',
        imageData: null,
        firstName: '',
        lastName: '',
        email: '',
        placeName: '',
        phoneNumber: '',
        price: '',
        caption: '',
        currentUser: firebase.auth().currentUser.uid
    }
},
methods: {
    create() {
        db.collection('Lands').add({
            firstName: this.firstName,
            lastName: this.lastName,
            email: this.email,
            placeName: this.placeName,
            phoneNumber: this.phoneNumber,
            price: this.price,
            caption: this.caption,
            photo: this.img1       
        })
        .then((response) => {
            console.log(response)
        })
        .catch(err => {
            console.log(err)
        })
        this.firstName = '';
        this.lastName = '';
        this.email = '';
        this.placeName = '';
        this.phoneNumber = '';
        this.price = '';
        this.caption = '';
        this.photo = '';
    },
    click1() {
        this.$refs.input1.click()   
    },
    previewImage(event) {
        this.uploadValue = 0;
        this.img1 = null;
        this.imageData = event.target.files[0];
        this.onUpload()
    },
    onUpload() {
        this.img1 = null;
        const storageRef = firebase
            .storage()
            .ref(`${this.currentUser}`)
            .child(`${this.imageData.name}`)
            .put(this.imageData);
            storageRef.on(`state_changed`, snapshot => {
                this.uploadValue = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
            }, error => {
                console.log(error.message);
            }, () => {
                this.uploadValue = 100;
                storageRef.snapshot.ref.getDownloadURL().then((url) => {
                this.img1 = url;
                console.log(this.img1);
            });
        }
    );
}

How can I upload more images to my storage? I have a v-carousel that is a slider. When I add one image it shows the image, but when you add more images, I want it to show all the images on the slider.

Some images:

My form

Choose button and below the slider

And my Firestore database

CRUD DS CRUD DS · Accepted Answer · 2020-10-23T05:07:53

This is an asynchronous kind of programming to which you require a combination of promises and resolving them using the Promise.all function like so:

async function uploadStorage(path, file){
    return new Promise((resolve, reject)=>{
        storage.ref(path).put(f).then(async r=>{
            r.ref.getDownloadURL().then(url=>{
                resolve({
                    success: true,
                    url: url
                })
            }).catch(e=>{
                resolve({
                    success: false,
                    msg: e.message
                })
            })
        }).catch(e=>{
            resolve({
                success: false,
                msg: e.message
            })
        })
    })
}

let path = "path-in-storage";

// CREATE AN ARRAY OF PROMISES
let allOperations = arrayOfFiles.map(file=>{
    // FILE IN BLOB / FILE FORMAT
    return uploadStorage(path, file);
})

// GET URLS
let allURLS = await Promise.all(allOperations).then(result=>{
    return result.filter(res=>{
        return res.success;
    }).map(res=>{
        return res.url;
    })
})

You might wanna store the path and document ID so that you can delete them later and free up space in your storage.

Vuejs + Firebase Storage upload multiply images into Firebase Storage and push all downloadURL into Firestore

1 Answers