I am encountering a small issue with my script. I am attempting to upload a file to Firebase storage using Vue.js. Everything seems to be working fine, except that the URL is null. My script deals with a form for book values which includes fields such as an id, title, description, price, pdf (the file), pdf_url, and the uploaded value of the script.
import firebase from "firebase";
import db from "./firebaseInit";
export default {
name: "vendre",
data : ()=> {
return {
id_livre: null,
titre: null,
description: null,
prix_d : null,
pdf : null,
pdf_url : null,
uploadValue : null
}
},
methods: {
onfileSelected(event){
this.pdf_url = null;
this.pdf = event.target.files[0]
console.log(event);
},
saveBook(){
this.pdf_url = null;
const storageRef = firebase.storage().ref(`${this.pdf.name}`).put(this.pdf);
storageRef.on(`state_changed`, snapshot=> {
this.uploadValue = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
}, error => {console.log(error.message)}, () => {
this.uploadValue = 100;
storageRef.snapshot.ref.getDownloadURL().then((url)=> {
this.pdf_url = url;
})
})
console.log(this.pdf_url);
db.collection('Livres').add({
id_livre : this.id_livre,
titre : this.titre,
description : this.description,
url: this.pdf_url
}).then(docRef => {
this.$router.push('/');
console.log(docRef);
}).catch(error => console.log(error.message))
}
}
};