My issue revolves around uploading multiple files to Firebase storage after adding an image. The upload works fine, but I encounter a problem when trying to retrieve the download URLs for these files. While getting URLs for multiple files is successful, I face issues with obtaining the URL for the separate image file. It seems to return null in this case. Just to provide some context, I am using Vue.js. Below are the methods I am utilizing, and all inputs seem to be correct.
methods:{
async uploadImageFile() {
var slugify = require('slugify')
let imageName = this.$refs.image.files[0].name.split("".")[0]
let ext = this.$refs.image.files[0]['name'].split("".")[1]
this.blog.image = slugify(imageName)
const {canvas} = this.$refs.cropper.getResult();
if (canvas) {
canvas.toBlob( blob => {
let uploadTask = storageRef.child('blogs/' + this.blog.image +"-"+ moment().unix()+ "." +ext)
try {
uploadTask.put(blob)
let downloadURL = uploadTask.getDownloadURL()
this.blog.imageUrl = downloadURL
}
catch (error){
console.log(error)
}
});
}
},
save() {
let slugify = require("slugify")
this.blog.slug = slugify(this.blog.title)
this.blog.user = usersCollection.doc(this.$store.state.userProfile.uid)
this.blog.active = false
this.blog.created = firebase.firestore.Timestamp.fromDate(new Date())
blogsCollection.add(this.blog).then(() => {
router.push('/admin/blogs');
}).catch((error) => {
console.error("Error adding document: ", error);
});
},
async saveFiles(){
await this.uploadImageFile()
for(const fileIndex in this.files){
let timestamp = new Date()
let fileObject = this.files[fileIndex]
let fileNameName = fileObject.name
let ext = fileObject.name.split("".")[1]
try {
let uploadTask = storageRef.child('blogs/' + fileNameName.split("".")[0] + "-" + timestamp.getTime().toString() + "." + ext)
await uploadTask.put(fileObject)
let downloadURL = await uploadTask.getDownloadURL()
this.blog.files.push({fileName:fileNameName,
fileURL:downloadURL})
} catch (error){
console.log(error)
}
}
this.save()
}
}
I have assigned the @click method to the saveFiles() function.