Skip to content

Instantly share code, notes, and snippets.

@CristalT
Last active October 5, 2023 11:20
Show Gist options
  • Save CristalT/2651023cfa2f36cddd119fd979581893 to your computer and use it in GitHub Desktop.
Save CristalT/2651023cfa2f36cddd119fd979581893 to your computer and use it in GitHub Desktop.
File Uploader Component for Vue.js using Firebase Storage
<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>
Copy link

ghost commented May 20, 2019

wow hard

@Acewill90
Copy link

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

@jobenjada
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment