A
A
Andrew2019-11-08 00:55:56
JavaScript
Andrew, 2019-11-08 00:55:56

How to upload multiple images to firebase with vue (+vuex)?

Good evening. I'm learning to write applications in vuejs, I decided to make a portfolio as a workout, but I got stuck at one point. The code below adds one image, but I need several to use in the slider later. Tell me how to do it?
template:

<b-form-file
    size="sm"
    placeholder="Выберите файл..."
    @change="onFileChange" 
></b-form-file>
<div class="selected-images">
     <img :src="imageSrc" alt="">
</div>

data () {
    return {
      id:null,
      name:'',
      description:'',
      type:'',
      imageSrc:'',
      image:null
   }
},
method: {
    onFileChange (e) {
        const file = e.target.files[0]
        const reader = new FileReader()
        reader.onload = e => {
            this.imageSrc = reader.result
        } 
        reader.readAsDataURL(file)
        this.image = file
    }
}

Here is the Vux:
import * as fb from 'firebase'

class Work {
    constructor (name, description, type, id = null, imageSrc = '') {
        this.name = name,
        this.description = description,
        this.type = type,
        this.id = id
    }
}
...
actions: {
        async createWork ({commit}, payload) {
            commit('clearError')
            commit('setLoading', true)
            let imageSrc
            let key
            try {
                const newWork =  new Work (
                    payload.name,
                    payload.description,
                    payload.type,
                    ''
                )
                await fb.database().ref('works').push(newWork)
                .then((data) => {
                    key = data.key
                    return key
                })
                .then(key => {
                    const filename = payload.image.name
                    const ext = filename.slice(filename.lastIndexOf('.'))
                    return fb.storage().ref('works/' + key + '.' + ext).put(payload.image)
                })
                .then(snapshot => {
                    return new Promise((resolve) => {
                        snapshot.ref.getDownloadURL().then(url => {
                            snapshot.downloadURL = url
                            resolve(snapshot)
                        })
                    })
                })
                .then((snapshot) => {
                    imageSrc = snapshot.downloadURL
                    return fb.database().ref('works').child(key).update({imageSrc: imageSrc})
                })
                .then(() => {
                    commit('setLoading', false)
                    commit('createWork', {
                        ...newWork,
                        imageSrc: imageSrc,
                        id: key
                    })
                })
            } catch (error) {
                commit('setError', error.message)
                commit('setLoading', false)
                throw error
            }
        }
}

Thanks in advance to everyone who helps out!

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question