Custom Profile Picture Upload Complete

frontend-next/firebase-config.js

@@ -1,6 +1,7 @@
 import { initializeApp, getApps, getApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
 import { getDatabase} from "firebase/database"
+import {getStorage} from "firebase/storage"
 
 var config = {
     apiKey: "AIzaSyDbDPjQGt-lIjNPeTG-Q5AECM1m0vtOr2c",
@@ -14,6 +15,7 @@ var config = {
 
 var app = getApps().length > 0 ? getApp() : initializeApp(config);
 var auth = getAuth(app);
+var storage = getStorage(app);
 var database = getDatabase(app);
 
-export { auth, app, database };
+export { auth, app, database, storage };

frontend-next/src/app/app/page.js

@@ -1,7 +1,7 @@
 "use client";
 // System Imports
 import { useState, useEffect } from "react";
-import { auth, database } from "../../firebase-config";
+import { auth, database } from "../../../firebase-config";
 import { ref, onValue, set, remove, get } from "firebase/database";
 import { useBeforeunload } from "react-beforeunload";
 import {Marker} from "pigeon-maps";

frontend-next/src/app/login/page.js

@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
 import "../globals.css"
 
 // Firebase imports
-import {auth} from "../../firebase-config";
+import {auth} from "../../../firebase-config";
 import { setPersistence, signInWithEmailAndPassword, indexedDBLocalPersistence  } from "firebase/auth";
 
 function Login() {

frontend-next/src/app/onboarding/page.js

@@ -3,7 +3,7 @@ import "../globals.css"
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
 import { ref, set } from "firebase/database";
-import {auth, database} from "../../firebase-config"
+import {auth, database} from "../../../firebase-config"
 import {onAuthStateChanged} from "firebase/auth"
 
 function createUser(data) {

frontend-next/src/app/page.js

@@ -1,7 +1,7 @@
 "use client"
 import { useState, useEffect } from 'react'
 
-import { auth, database } from "../firebase-config";
+import { auth, database } from "../../firebase-config";
 import { ref, get} from "firebase/database";
 import {onAuthStateChanged} from "firebase/auth"
 

frontend-next/src/app/register/page.js

@@ -5,7 +5,7 @@ import "../globals.css"
 import { useState } from "react";
 
 import { createUserWithEmailAndPassword, signInWithEmailAndPassword, setPersistence, indexedDBLocalPersistence  } from "firebase/auth";
-import {auth} from "../../firebase-config";
+import {auth} from "../../../firebase-config";
 
 async function Signup(data) {
     var userCredential = await createUserWithEmailAndPassword(auth,data.email,data.password);

frontend-next/src/app/user/[stub]/page.js

@@ -1,8 +1,9 @@
 "use client";
 // System Imports
 import { useState, useEffect } from "react";
-import { auth, database } from "../../../firebase-config";
-import { ref, onValue, get, set, update  } from "firebase/database";
+import { auth, database, storage } from "../../../../firebase-config";
+import { ref, onValue, get, update  } from "firebase/database";
+import { ref as sRef, getDownloadURL  } from "firebase/storage";
 import {Marker} from "pigeon-maps";
 import {onAuthStateChanged} from "firebase/auth"
 import { useForm, Form } from "react-hook-form";
@@ -13,6 +14,7 @@ import { useForm, Form } from "react-hook-form";
 
 // Header Import
 import { Header } from "../../../components/app/header";
+import { uploadBytes } from "firebase/storage";
 
 // Contains most everything for the app homepage
 function Home({ params }) {
@@ -77,14 +79,23 @@ function Home({ params }) {
   },[]);
 
   function save({data}) {
-    for (var key in data) {
-      if (data[key] == "") {
-        data[key] = profileData[key]
-      }
+    if (data.pfp) {
+      // image stuff
+      uploadBytes(sRef(storage, `users/${user.uid}/pfp`), data.pfp[0]).then(() => {
+        getDownloadURL(sRef(storage, `users/${user.uid}/pfp`)).then((url) => {
+          console.log(url)
+          data.pfp = url
+          for (var key in data) {
+            if (data[key] == "") {
+              data[key] = profileData[key]
+            }
+          }
+      
+          setEdit(false)
+          update(ref(database, `users/${user.uid}`), data)
+        })
+      })
     }
-    console.log(data)
-    setEdit(false)
-    update(ref(database, `users/${user.uid}`), data)
   }
 
   return (

frontend-next/src/components/app/header.js

@@ -1,4 +1,4 @@
-import { auth, database } from "../../firebase-config";
+import { auth, database } from "../../../firebase-config";
 import { ref, set, remove } from "firebase/database";
 import {signOut} from "firebase/auth";
 import { Popover } from '@headlessui/react'

frontend-next/src/components/app/main_tab/chat.js

@@ -2,7 +2,7 @@ import { Chat, SystemMessage} from "../datatypes"
 import { useState, useEffect } from "react";
 import { Form, useForm } from "react-hook-form";
 import { ref, onValue, set} from "firebase/database";
-import { database } from "../../../firebase-config";
+import { database } from "../../../../firebase-config";
 
 
   // Chatroom Module for Primary Tab

frontend-next/src/components/app/sidebar/home.js

@@ -1,5 +1,5 @@
 import { Form, useForm } from "react-hook-form";
-import { database } from "../../../firebase-config";
+import { database } from "../../../../firebase-config";
 import { ref, set } from "firebase/database";
 
 // CreateRoom Module for Sidebar Create Tab