I was learning how to upload images to Firebase Storage by following a video tutorial. The tutorial can be accessed at this link: https://www.youtube.com/watch?v=SpxHVrpfGgU&feature=youtu.be.
Instead of replicating the example app in the tutorial, I tried to build it using Vue.JS and Vuetify. Everything seemed to work fine except for one issue - the progress bar did not update with the upload percentage. Even though I could see the uploadPercentage changing in the console log, it just wouldn't render on the screen. Does anyone have any insights into why this might be happening and how I can fix it?
Here is the code snippet:
<template>
<v-container style="height: 100%;">
<v-row
style="height: 30%;"
></v-row>
...
</v-container>
</template>
<script>
import firebase from '@/firebase/init'
export default {
data: () => ({
file: null,
imageURL: null,
uploadPercentage: 0
}),
methods: {
onFileChange () {
let reader = new FileReader()
reader.onload = () => {
reader.imagUrl = reader.result
}
reader.readAsDataURL(this.file)
},
onUpload () {
// create a firebase storage ref
var storageRef = firebase.storage().ref('public_wall/' + this.file.name)
// upload file
var task = storageRef.put(this.file)
// update progress bar
task.on('state_changed',
function progress (snapshot) {
var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
console.log(percentage)
this.uploadPercentage = percentage
console.log(this.uploadPercentage)
},
function error (err) {
console.log(err)
},
function completed () {
}
)
}
}
}
</script>