Eksempel s. 218 Bildeblogg

Her finner du koden til å lage en bildeblogg med Firebase. Husk at du må bruke generert kode fra ditt eget Firebase-prosjekt.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bildelagring</title>
    </head>
    <body>
        <form id="skjema">
            <input type="file" id="inpFil" class="button" required>
            <input type="text" id="inpBildetekst" required placeholder="Hva har du tatt bilde av?">
            <button class="button" type="submit">OK</button>
        </form>
        <div id="info"></div>

        <section id="alleBildene"></section>

        <script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
        <script>
            // Initialize Firebase
            var config = {
                apiKey: "AIzaSyA3bprSpIhgoezN2KCc1RGQ-S1_QLcmd9c",
                authDomain: "nettbutikken-ca649.firebaseapp.com",
                databaseURL: "https://nettbutikken-ca649.firebaseio.com",
                projectId: "nettbutikken-ca649",
                storageBucket: "nettbutikken-ca649.appspot.com",
                messagingSenderId: "325012157694"
            };
            firebase.initializeApp(config);
        </script>

        <script>
            // Setter opp Firebase med database og storage
            let database = firebase.database(); // Lagring av data om bilder
            let storage = firebase.storage(); // Lagring av bilder
            let bildedata = database.ref("bildedata"); // Hvor vi lagrer data om bildene
            let skjema = document.getElementById("skjema");
            let inpBildetekst = document.getElementById("inpBildetekst");
            let inpFil = document.getElementById("inpFil");
            let alleBildene = document.getElementById("alleBildene");
            function lagreData(snapshot) {
                let bildeURL = snapshot.downloadURL; // URL hvor vi finner bildet
                let bildeTekst = inpBildetekst.value; // Beskrivelse av bildet
                let bildeinfo = {
                    "url" : bildeURL,
                    "tekst" : bildeTekst
                };
                bildedata.push(bildeinfo);
            }
            function lastOppBilde(evt) {
                evt.preventDefault();
                let fil = inpFil.files[0]; // Filen som er valgt
                let lagringsplass = storage.ref("bilder/" + new Date()); // Får et unikt filnavn
                lagringsplass.put(fil).then(lagreData); // Passer på å ikke lagre data før bildet er lagret
            }
            function visAlleBildene(snapshot) {
                let bildedata = snapshot.val();
                alleBildene.innerHTML = `<article>
                        <img src="${bildedata.url}">
                        <p>${bildedata.tekst}</p>
                    </article>
                    <hr>` + alleBildene.innerHTML;
            }
            // Legger til kode som sørger for å starte funksjonen når brukeren velger bilde
            skjema.addEventListener("submit", lastOppBilde);
            bildedata.on("child_added", visAlleBildene); // Viser bildene som legges til
        </script>
    </body>
</html>