I've tried everything, but I just can't seem to get the downloadURL when using Vue.js for file upload. Here's the code:
Below is an image showing the console log. The image saves successfully, but the issue is that I am not getting a downloadURL.
// Function to upload file
uploadFile(file, metadata) {
if(file === null) return false
let pathToUpload = this.currentChannel.id
// Get reference to Messages.vue which returns either public or private channel
let ref = this.$parent.getMessagesRef()
// File path generation
let filePath = this.getPath() + '/' + uuidV4() + '.jpg'
// Upload file to storage
this.uploadTask = this.storageRef.child(filePath).put(file, metadata)
// Set upload state to "uploading"
this.uploadState = "uploading"
// Handle upload state change
this.uploadTask.on('state_changed', snapshot => {
console.log('image uploaded/state_changed in storage: ', snapshot)
// Calculate upload progress percentage
let percent = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
$(".progress-bar").css("width", percent+'%')
}, error => {
// Error handling
this.errors.push(error.message)
this.uploadState = 'error'
this.uploadTask = null
}, () => {
// Upload finished
this.uploadState = 'done'
console.log('done upload')
// Reset form
this.$refs.file_modal.resetForm()
// Retrieve the file URL
let fileUrl = this.uploadTask.snapshot.downloadURL
console.log('downloadURL(snapshot) from firebase: ', this.uploadTask.snapshot)
// Call sendFileMessage() with fileUrl as parameter after successful upload
this.sendFileMessage(fileUrl, ref, pathToUpload)
})
},
Console.log() output:
https://i.sstatic.net/dMbvR.png
Your assistance is greatly appreciated!