Using html/JS, I am trying to write a file.
I included this on html head :
<head>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-firestore.js"></script>
Then at the end of the body I have :
//...
<script src="javascripts/main.js"></script>
<script>
var config = {
apiKey: "xxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
projectId: "xxxx",
storageBucket: "xxxx.appspot.com",
messagingSenderId: "xxxxx"
};
firebase.initializeApp(config);
const db = firebase.firestore();
db.settings({timestampsInSnapshots:true});
</script>
Then on the main.js file when I try to write to storgae :
var storageRef = firebase.storage().storage.ref()('me/' + file.name);
var task=storageRef.put(file);
task.on('state_changed',
function progress(snapshot){console.log(snapshot.bytesTransferred)},
function error(err){},
function complete(){});
I get this error on the console :
firebase.storage is not a function
EDIT:
Tried again and got same error with :
// Create a root reference
var storageRef = firebase.storage().ref();
// Create a reference to 'images/mountains.jpg'
var finalRef = storageRef.child('me/' + file.name);
finalRef.put(file).then(function(snapshot){
console.log('uploading');
});
you need to add this also:
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-storage.js"></script>
to be able to use firebase storage api.
Also change this:
var storageRef = firebase.storage().storage.ref()('me/' + file.name);
Into this:
var storageRef = firebase.storage().ref('me/' + file.name);
Check this for more info:
https://firebase.google.com/docs/storage/web/create-reference
change you script main.js position like this
<script>
var config = {
apiKey: "xxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
projectId: "xxxx",
storageBucket: "xxxx.appspot.com",
messagingSenderId: "xxxxx"
};
firebase.initializeApp(config);
const db = firebase.firestore();
db.settings({timestampsInSnapshots:true});
</script>
//to here
<script src="javascripts/main.js"></script>
Check whether your firebase import is correct. It won't work if you imported it incorrectly.
It should be like this
import * as firebase from "firebase/app";
Not this
import * as firebase from "firebase";
Related
I'm trying to delete some data from firebase realtime database after some time but gives me this error: Uncaught TypeError: ref2.orderByChild is not a function
this is the code:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import {getDatabase, ref, child, onValue, get} from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js"
import "https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill#latest/lib/bundle.min.js";
const firebaseConfig = {
apiKey: "xxxxx",
authDomain: "xxxxx",
databaseURL: "xxxxx",
projectId: "xxxxx",
storageBucket: "xxxxx",
messagingSenderId: "xxxxx",
appId: "xxxxx"
};
const app = initializeApp(firebaseConfig);
const db = getDatabase();
var ref2 = ref(db, "/2021-2022/Pentamestre/Voti/Novità");
var now = Date.now();
var cutoff = now - 2 * 60 * 60 * 1000;
var old = ref2.orderByChild('timestamp').endAt(cutoff).limitToLast(1);
var listener = old.on('child_added', function(snapshot) {
snapshot.ref.remove();
});
Obviously in firebaseConfig the datas are presents, i only hidden them here
There's a top level function query() in the new Modular SDK to build a Query. Similarly, orderByChild() and other query constraints are also a function. Try refactoring the code as shown below:
var old = query(ref2, orderByChild('timestamp'), endAt(cutoff), limitToLast(1));
var listener = onChildAdded(old, function(snapshot) {
// ...
});
I see you imported "get" but didnt use it,
and the ref "/2021-2022/Pentamestre/Voti/Novità" is maybe
"2021-2022/Pentamestre/Voti/Novità"
as path doesnt start with /slash
currently I creating the website using cloud firestore as my database. Right now I can query the data from my collection but it didn't work when I try to display that data on my html web page.
const firebase = require("firebase/app")
require("firebase/firestore")
var firebaseConfig = {
apiKey: "AIzaSyCxrJbfDOorE9H4E0I2O98tLftoxFAHNLU",
authDomain: "school-bus-tracking-syst-3ff71.firebaseapp.com",
databaseURL: "https://school-bus-tracking-syst-3ff71.firebaseio.com",
projectId: "school-bus-tracking-syst-3ff71",
storageBucket: "school-bus-tracking-syst-3ff71.appspot.com",
messagingSenderId: "200434933461",
appId: "1:200434933461:web:4cece32389af487c944c5c",
measurementId: "G-Q9C278TWTV"
};
firebase.initializeApp(firebaseConfig);
var firestore = firebase.firestore();
const inputTextfield = document.querySelector("#contactnum");
const docRef = firestore.doc("driver/D001");
docRef.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
inputTextfield.innerText = doc.data().contactNo;
});
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
and my HTML file is
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-firestore.js"></script>
<input type="text" id="contactnum">
<script scr = "./we.js"></script>
I tried this but I don't get anything display on my html website. Thank you in advance!
I can't link the function below to my JavaScript file. I am using Firebase CDN code snippet. What am I doing wrong?
Firebase snippet:
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAPeU7jO2Zz5kdrh-4g4ehfcrL8Aufzubs",
authDomain: "udemy-modern-javascript-cee40.firebaseapp.com",
databaseURL: "https://udemy-modern-javascript-cee40.firebaseio.com",
projectId: "udemy-modern-javascript-cee40",
storageBucket: "udemy-modern-javascript-cee40.appspot.com",
messagingSenderId: "941299603483",
appId: "1:941299603483:web:afcd4f1da6878b51ef80be",
measurementId: "G-BRYW3TQNLL"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.analytics();
js file:
db.collection('recipes').get().then((snapshot)=>{
console.log(snapshot);
}).catch(err =>{
console.log(err)
});
The error msg is:
sandbox.js:1 Uncaught TypeError: db.collection is not a function at sandbox.js:1 (anonymous) # sandbox.js:1
The db variable from the script tag in your HTML file is not automatically available in the .js file.
You'll typically want to put all JavaScript (including what you now have in the script tag into the .js file or have all of it in the script tag in the HTML file.
Putting all code in the .js file is more common, so that'd become:
var firebaseConfig = {
apiKey: "AIzaSyAPeU7jO2Zz5kdrh-4g4ehfcrL8Aufzubs",
authDomain: "udemy-modern-javascript-cee40.firebaseapp.com",
databaseURL: "https://udemy-modern-javascript-cee40.firebaseio.com",
projectId: "udemy-modern-javascript-cee40",
storageBucket: "udemy-modern-javascript-cee40.appspot.com",
messagingSenderId: "941299603483",
appId: "1:941299603483:web:afcd4f1da6878b51ef80be",
measurementId: "G-BRYW3TQNLL"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.analytics();
db.collection('recipes').get().then((snapshot)=>{
console.log(snapshot);
}).catch(err =>{
console.log(err)
});
const db = firebase.analytics();
I try to make an online store. I did the register/login part using firebase and it works, but when I try to retrieve data from database in another javascript file, I get an error.
The javascript line where I get the error:
var userDataRef = firebase.database().ref('users/');
The error:
Uncaught ReferenceError: firebase is not defined
at BooksArtJS.js:17
The html code:
<script src="BooksArtJS.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"> </script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>
<script>
var firebaseConfig = {
apiKey: "theApiKey",
authDomain: "theAuthDomain",
databaseURL: "theDatabaseURL",
projectId: "theProjectID",
storageBucket: "theStorageBucket",
messagingSenderId: "theMessagingSenderID",
appId: "theAppID"
};
firebase.initializeApp(firebaseConfig);
</script>
Try moving your script with BooksArtJS.js after firebaseConfig script, also, for security reasons it is better to make a new js file called something like "conn.js" and moving your config files there.
It seems that the BooksArtJS.js script is using firebase. You should place script after firebase is loaded:
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>
<script>
var firebaseConfig = {
apiKey: "theApiKey",
authDomain: "theAuthDomain",
databaseURL: "theDatabaseURL",
projectId: "theProjectID",
storageBucket: "theStorageBucket",
messagingSenderId: "theMessagingSenderID",
appId: "theAppID"
};
firebase.initializeApp(firebaseConfig);
</script>
<script src="BooksArtJS.js"></script>
I think the only thing you have wrong "users/" Look:
var userDataRef = firebase.database().ref('users/');
Change it to "users"
var userDataRef = firebase.database().ref('users');
Or you can use:
var userDataRef = firebase.database().ref('users/' + data);
If you are using firebase version 9.0.2 you can use the code as below.
The HTML code.
<script>
const firebaseApp = firebase.initializeApp({
apiKey: "theApiKey",
authDomain: "theAuthDomain",
databaseURL: "theDatabaseURL",
projectId: "theProjectID",
storageBucket: "theStorageBucket",
messagingSenderId: "theMessagingSenderID",
appId: "theAppID"
});
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
</script>
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-auth-compat.js"></script>
I can't show alert after called firebase
<script>
var config = {
apiKey: "AIzaSyCnmZWNwp3CfjXDcDL5MADIej6GwvxWEtQ",
authDomain: "dsmweb-ba185.firebaseapp.com",
databaseURL: "https://dsmweb-ba185.firebaseio.com",
storageBucket: "dsmweb-ba185.appspot.com",
};
firebase.initializeApp(config);
alert('asdf');
</script>
This is my source code, and what is wrong?
something happend in " firebase.initializeApp(config); "