Upload image

- Image upload works on profile
- added multer into package.json for handling image files
- files are saved under /db/images/users/user-id/profile.ext

src/Profile/Profile.js

@@ -1,4 +1,5 @@
 import server from "../_/code/bridge/serverFunctions";
+import util from "../util";
 
 css(`
   profile- textarea::-webkit-scrollbar {
@@ -38,15 +39,31 @@ class Profile extends Shadow {
       })
 
       form(() => {
+        input("Image Upload", "0px", "0px")
+          .attr({ name: "image-upload", type: "file" })
+          .display("none")
+          .visibility("hidden")
+          .onChange((e) => {
+            this.handleUpload(e.target.files[0]);
+          })
+
         VStack(() => {
-          HStack(() => { }) // Profile Image placeholder
+          HStack(() => { 
-            .boxSizing("border-box")
+            if (global.profile.image_path) {
-            .height(10, em)
+              img(`${util.HOST}${global.profile.image_path}`, "10em", "10em")
-            .width(10, em)
+                .borderRadius(100, pct)
-            .paddingHorizontal(0.5, em)
+            }
-            .border("1px solid var(--accent)")
+          })
-            .borderRadius(100, pct)
+          .boxSizing("border-box")
-            .background("var(--darkaccent)")
+          .height(10, em)
+          .width(10, em)
+          .border("1px solid var(--accent)")
+          .borderRadius(100, pct)
+          .background("var(--darkaccent)")
+          .onTap(() => {
+            const inputSelector = this.$('[name="image-upload"]');
+            inputSelector.click()
+          })
 
           h1(this.profile.first_name + " " + this.profile.last_name)
           .color("var(--headertext")
@@ -123,6 +140,31 @@ class Profile extends Shadow {
     .pointerEvents("none")
   }
 
+  async handleUpload(file) {
+    try {
+      const body = new FormData();
+      body.append('image', file);
+      const res = await util.authFetch(`${util.HOST}/profile/upload-image`, {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Accept": "application/json"
+        },
+        body: body
+      });
+      
+      if(res.status === 401) {
+        return res.status
+      }
+      if (!res.ok) return res.status;
+      const data = await res.json()
+      global.profile = data.member
+      console.log(global.profile)
+    } catch (err) { // Network error / Error reaching server
+      console.error(err);
+    }
+  }
+
   convertDate(rawDate) {
     const parsed = new Date(rawDate);
 

src/apps/People/PeopleCard.js

@@ -1,19 +1,26 @@
+import util from "../../util"
+
 class PeopleCard extends Shadow {
     constructor(person) {
         super()
         this.person = person
+        this.imgSrc = null
     }
 
     render() {
         HStack(() => {
-            HStack(() => { })
+            HStack(() => { 
-                .boxSizing("border-box")
+                if (!this.imgSrc.includes("null")) {
-                .height(3, em)
+                    img(this.imgSrc, "3em", "3em")
-                .width(3, em)
+                        .borderRadius(100, pct)
-                .paddingHorizontal(0.5, em)
+                }
-                .border("1px solid var(--accent)")
+            })
-                .borderRadius(100, pct)
+            .boxSizing("border-box")
-                .background("var(--darkaccent)")
+            .height(3, em)
+            .width(3, em)
+            .border("1px solid var(--accent)")
+            .borderRadius(100, pct)
+            .background("var(--darkaccent)")
 
             VStack(() => {
                 p(this.person.first_name + " " + this.person.last_name)
@@ -29,6 +36,10 @@ class PeopleCard extends Shadow {
         .gap(1, em)
     }
 
+    connectedCallback() {
+        this.imgSrc = `${util.HOST}${this.person.image_path}`
+    }
+
     convertDate(rawDate) {
         const parsed = new Date(rawDate);
 

src/components/AppWindowContainer.js

@@ -2,8 +2,6 @@ import "./AppWindow.js"
 import "../Profile/Profile.js"
 
 class AppWindowContainer extends Shadow {
-    isProfileOpen = false
-
     render() {
         ZStack(() => {
 

src/components/Sidebar.js

@@ -9,7 +9,6 @@ class Sidebar extends Shadow {
             .fontFamily("Arial")
             .marginLeft(2, em)
             .onTap(function (done) {
-                console.log("hello")
                 if(done) {
                     if (this.innerText === "Logout") {
                         global.onLogout()

vite.config.ts

@@ -32,6 +32,10 @@ export default defineConfig({
         target: "http://localhost:10002",
         changeOrigin: true
       },
+      "/profile/upload-image": {
+        target: "http://localhost:10002",
+        changeOrigin: true
+      },
       "/api": {
         target: "http://localhost:10002",
         changeOrigin: true