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>

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

Have you managed to get this working yet? if so, could you please share?

@jbiddulph, I was able to get this working without issue. Could you please post your non-functional code here?

Hi CristalT and Crew,

I found information on FileUploader.vue on website: 'https://lovemewithoutall.github.io/it/vue-image-upload-to-firestorage/ ', which gave Thanks to your github repo.

I am trying to get it to work with my project. I refactored this code into mine, but having a difficult time understanding what is wrong. Can you help me? Here is my github repo: https://github.com/gchan82/feedme . I put this material on FileUploaderMain.vue and child is FileUploader.vue. Hierarchy is like this:
AddDish.vue
FileUploaderMain.vue
FileUploader.vue

Maybe you can respond back on my github repo under issues. First time using this comment board, so I don't know if/where I will get response back. Thank you.

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)
    }