Good day developers, I'm building this app in Vuejs with Firebase, storing some videos and images in my Storage module of Firebase, but then when I initialize the function of retrieving that images I got this error: "firebase__WEBPACK_IMPORTED_MODULE_2__.storage(...).ref(...).child(...).then is not a function"
On my Vuex method, I set this in order to access the image in my firebase storage
actions: {
getVideoAboutMe({commit}) {
firebase
.storage()
.ref("myVideo")
.child("coverr-a-greek-cemetery-top-view-1578925848736.mp4")
.then(uploadTaskSnapshot => {
commit("setVideoAboutMe", uploadTaskSnapshot);
console.log(uploadTaskSnapshot);
return uploadTaskSnapshot.ref.getDownloadURL();
})
.catch((error) => {
alert("Error", error);
});
},
And my main js file is designed on this way:
import * as firebase from "firebase";
import "firebase/storage";
Vue.config.productionTip = false;
Vue.component("myAboutMe", aboutTag);
new Vue({
router,
store,
vuetify,
render: h => h(App),
created() {
firebase.initializeApp({
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
});
this.$store.dispatch("getVideoAboutMe");
}
}).$mount("#app");
then all the logic on components is created, but the error refers exactly to this method in the vuex , like if storage didn't exist(i assume it does cause of importing the firebase).
Any advice about how could I improve this?...thanks!!!
child() doesn't return a promise, so you can't call then() on it. It returns a Reference object. If you want to get the download URL for the object referred to by that reference, just call getDownloadURL() on it directly. It returns a promise.
firebase
.storage()
.ref("myVideo")
.child("coverr-a-greek-cemetery-top-view-1578925848736.mp4")
.getDownloadURL()
.then(...)
.catch(...)
Related
I made a Firebase app with database, connected it with Vue app, which is like todo-list. I tried to get a data from database from firebase, which is used to make components for app, but something got wrong. Vue app doesn't get the data from firebase, so items aren't created
It's th error:
#firebase/firestore: Firestore (9.10.0): Uncaught Error in snapshot listener: {"code":"permission-denied","name":"FirebaseError"
Initializing firebase:
import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";
import { getFirestore } from "#firebase/firestore";
const firebaseConfig = {
apiKey: "AIzaSyBZlP_E74i40ZLopttFlUbg3j36wirKf9A",
authDomain: "quotes-app-8788c.firebaseapp.com",
projectId: "quotes-app-8788c",
storageBucket: "quotes-app-8788c.appspot.com",
messagingSenderId: "934346412075",
appId: "1:934346412075:web:5da2928fecb05c834f5a6e"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export {
db
}
Here is my code:
onSnapshot(collection(db, 'quotes'), (QuerySnapshot) => {
const fbquotes = [];
QuerySnapshot.forEach((doc) => {
const quote = {
id: doc.data().id,
quoteText: doc.data().quoteText,
quoteAuthor: doc.data().quoteAuthor,
quoteGenre: doc.data().quoteGenre,
timeCreating: doc.data().timeCreating,
timeEditing: doc.data().timeEditing
}
this.fbquotes.push(quote)
})
this.quotes = fbquotes
console.log(this.quotes);
})
console.log(this.quotes);
},
The error code "permission-denied" tells that your security rules are not allowing the user to query that whole collection. If a user can read all documents from the "quotes" collection then make sure you have the following rules:
match /quotes/{quotesId} {
allow read: if true;
}
You can change the condition for allow read if your requirements are different. Also Security Rules are not filters so if you want to allow a user to read their own documents only, then make sure you change the query in your code as well to match the security rules.
I am pretty new to expo and firebase, and I have this error that I have no idea what the issue is. I am trying to fetch photos from firebase database. I know for sure the issue is not with firebase config because I can upload photos into firebase storage.
I suspect the issue is with exporting and importing firebase.
This is the error message I am getting :
[TypeError: _firebase.db.ref is not a function. (In
'_firebase.db.ref('users/photos')', '_firebase.db.ref' is undefined)]
Note: I am using firebase v9
App.js file:
import { db } from './firebase';
export default function App() {
async function loadPhotos() {
try {
db.ref('users/photos')
.then(url => {
console.log('URL: ', url);
})
.catch(e => console.log(e));
console.log('Got here');
} catch (error) {
console.log('error', error);
}
}
...............
}
firebase.js file:
import firebase from 'firebase/compat/app';
import { getDatabase } from 'firebase/database';
const firebaseConfig = {
apiKey: '......',
authDomain: '.....',
projectId: '....',
storageBucket: '....',
messagingSenderId: '....',
appId: '.....',
measurementId: '....',
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
export const db = getDatabase();
In v9 and later of the Firebase SDK, most functionality that was a method on the objects in the past, is now available as a top-level function.
So instead of db.ref('users/photos'), you need to do ref(db, 'users/photos').
You're also missing a get call, which is how you actually retrieve the data from the reference:
get(ref(db, 'users/photos'))
.then(url => {
console.log('URL: ', url);
})
.catch(e => console.log(e));
This is all pretty well documented in the Firebase documentation on reading data, so I recommend keeping that handy. Alternatively you can use the compat paths in v9, to make the older syntax work as shown in the upgrade guide/
Hello I am trying to configure react app with firebase and use firestore.
"firebase": "^9.1.3"
I followed the instructions given in official docs.
Here is my congig.js file.
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
apiKey: '****',
authDomain: '*****',
projectId: '*****',
storageBucket: '*****',
messagingSenderId: '****',
appId: '*****',
};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
I am sure this gets initialized.
When I export it and use it in other file. collection is greyed out in vs code that means i am not using the import.
databaseservice.js
import { db } from './config';
import { collection, doc } from 'firebase/firestore';
export const getChapters = (scanId) => {
db.collection('somecollection')
.doc(scanId)
.get()
.then((doc) => {
if (doc.exists) {
console.log('Document data:', doc.data());
} else {
// doc.data() will be undefined in this case
console.log('No such document!');
}
})
.catch((error) => {
console.log('Error getting document:', error);
});
};
Error:TypeError: config__WEBPACK_IMPORTED_MODULE_0_.db.collection is not a function
I have tried with compat and lite versions. Getting the same issue.
This is v8/compat syntax:
db.collection('somecollection')
.doc(scanId)
.get()
.then((doc) => {
In v9/modular syntax, the equivalent is:
getDoc(doc(db, 'somecollection', scanId))
.then((doc) => {
For converting this type of thing, I find it easiest to keep the Firebase documentation and upgrade guide handy.
Firebase have changed their API to new modular syntax in version 9. You are using old syntax from version 8. You can read more about this and find instructions on upgrading your code here: https://firebase.google.com/docs/web/modular-upgrade
Also, everywhere in Firebase documentation, they now have 2 separate examples: one for old syntax, one or new modular syntax: https://firebase.google.com/docs/firestore/query-data/get-data
I am using firebase and I am trying to get the previous value of the updated data using 'onSnapshot' method but I couldn't find a way. I know that before version 9 of firebase trigger functions like 'onUpdate' were returning a change object and we were able to reach to both old and new data from that change object but I couldnt figure out a way in the SDK 9 of firebase. I would appreciate if anyone could help me out.
Here is my code snippet:
import { getFirestore, collection, doc, onSnapshot, query } from 'firebase/firestore'
import { initializeApp } from 'firebase/app';
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
/**
* Trigger function that fires on update of any document on cafe collection
*/
export const onUpdate = async () => {
const cafeCollection = collection(db, 'cafes');
const q = query(cafeCollection);
onSnapshot(q, (snapshot) => {
let changesArr = snapshot.docChanges();
if(changesArr.length == 1){
let changes = changesArr[0];
console.log(changes.type); // added-modified-removed
console.log(changes.doc.id); // id of the updated doc
console.log(changes.doc.data()); // newly updated data
}
})
}
I know that before version 9 of firebase trigger functions like 'onUpdate' were returning a change object
A change object is only available in Cloud Functions, as shown in the documentation on Writing Cloud Firestore-triggered functions. It is not (nor ever was) available in the client-side SDKs.
If you want to compare the current and previous snapshot, you will have to introduce a variable where you keep the previous snapshot yourself.
I'm trying to implement Vuefire in my project. I'm following the guidelines on the Vuefire site but still get this error.
db.js:
import firebase from 'firebase/app'
import 'firebase/firestore';
const firebaseConfig = {
apiKey: ....,
authDomain: ....,
projectId: ....,
storageBucket: ...,
messagingSenderId:....,
appId: ..."
};
const app = firebase.initializeApp(firebaseConfig)
export const db = app.firestore()
main.js
import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
import { firestorePlugin } from 'vuefire'
import DatetimePicker from 'vuetify-datetime-picker';
Vue.use(firestorePlugin)
Vue.config.productionTip = false;
Vue.use(DatetimePicker)
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app');
App.vue
import { db } from "../db";
export default {
name: "App",
data() {
return {
fireDB: [],
},
mounted() {
console.log(this.fireDB);
},
firestore: {
// fireDB: db.collection("something").doc('else').get().then((res) => {
// console.log(res);
// }) - like this it gives me the error.
//fireDB: db.collection("something") - like this it returns an array with an object that is my database.
},
};
from the console I see that the 'document' upon which onSnapshot is called is a promise
I'm not sure if this is the cause of your problem, but I got the same error when using VuexFire and it was because I had installed the Firebase v9 which has a new API and isn't compatible with Vuefire yet.
You can either try to use the new Firebase v9 API or downgrade to v8 - which is what the example code in the current Viewfire site uses (actually I think it says it's v7 but it works with v8).
To downgrade, check your package.json for the version of Firebase, and ensure it's v8 e.g. "firebase": "^8.10", (and run npm i)
This is the v8 query syntax
https://firebase.google.com/docs/firestore/quickstart#web-version-8_4
db.collection("users").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(`${doc.id} => ${doc.data()}`);
});
});
This is the v9 syntax
https://firebase.google.com/docs/firestore/quickstart#web-version-9_4
const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
console.log(`${doc.id} => ${doc.data()}`);
});
I found that VuexFire v3.2.5 worked when POSTing new documents to Firebase v9, but I got the onSnapshot error when binding a collection. So I downgraded to Firebase v8 and switched my bindings to the old syntax (as per the Viewfire docs).
There is an Viewfire issue about upgrading which is active (as of Oct 2021) but not complete yet. https://github.com/vuejs/vuefire/issues/1128