File Uploader Component for Vue.js using Firebase Storage

FileUploader.vue

<template>

  <div>
    <input type="file" multiple accept="image/jpeg" @change="detectFiles($event.target.files)">
    <div class="progress-bar" :style="{ width: progressUpload + '%'}">{{ progressUpload }}%</div>
  </div>

</template>

<script>
import storage from 'firebase/storage'
export default {
  data () {
    return {
      progressUpload: 0,
      file: File,
      uploadTask: '',
    }
  },
  methods: {
    detectFiles (fileList) {
      Array.from(Array(fileList.length).keys()).map( x => {
        this.upload(fileList[x])
      })
    },
    upload (file) {
      this.uploadTask = storage.ref('imagenes').put(file);
    }
  },
  watch: {
    uploadTask: function() {
      this.uploadTask.on('state_changed', sp => {
        this.progressUpload = Math.floor(sp.bytesTransferred / sp.totalBytes * 100)
      }, 
      null, 
      () => {
        this.uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
          this.$emit('url', downloadURL)
        })
      })
    }
  }
}
</script>

<style>
.progress-bar {
  margin: 10px 0;
}
</style>

wow hard

This won't work as expected, because you have multiple in input and each time this.upload() is called you are overwriting this.uploadTask

Yes, you are right, but could you tell me the solution?
Because for example: I want to upload 3 files to firebase storage, it is successful, but i can only read the last file's downloadUrl...
Thanks

This is how the upload method needs to be written for it to work.

Read more here

upload(file) {
      this.uploadTask = storage
        .ref('images')
        .child(file.name)
        .put(file)
    }