Initial working!

src/routes/settings/+page.server.ts

@@ -1,4 +1,9 @@
-import { redirect, type Actions } from "@sveltejs/kit";
+import {
+  error,
+  redirect,
+  type Actions,
+  type RequestEvent,
+} from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
 import { db } from "$lib/db/db.server";
 import { userTable } from "$lib/db/schema";
@@ -15,15 +20,17 @@ export const load: PageServerLoad = async (event) => {
 };
 
 export const actions: Actions = {
-  default: async (event: { request: { formData: () => any } }) => {
-    const formData = await event.request.formData();
-    let userId = formData.get("user_id");
-    let username = formData.get("username");
-    let firstName = formData.get("first_name");
-    let lastName = formData.get("last_name");
-    let icon = formData.get("icon");
+  default: async (event: RequestEvent) => {
+    const formData = (await event.request.formData()) as FormData;
+    let userId = formData.get("user_id") as string;
+    let username = formData.get("username") as string;
+    let firstName = formData.get("first_name") as string;
+    let lastName = formData.get("last_name") as string;
+    let icon = formData.get("icon") as string;
+    let profilePicture = formData.get("profilePicture") as File;
+    console.log(profilePicture);
 
-    let password = formData.get("password");
+    let password = formData.get("password") as string;
 
     if (!userId) {
       return {
@@ -70,6 +77,23 @@ export const actions: Actions = {
         .where(eq(userTable.id, userId));
     }
 
+    if (profilePicture) {
+      const response = await event.fetch("/api/upload", {
+        method: "POST",
+        body: profilePicture,
+      });
+
+      const data = await response.json();
+
+      if (data.error) {
+        throw error(400, {
+          message: "Error uploading profile picture",
+        });
+      }
+
+      console.log(data);
+    }
+
     await db
       .update(userTable)
       .set({

src/routes/settings/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { enhance } from "$app/forms";
 
   export let data;
@@ -9,6 +9,7 @@
   let icon = data.user?.icon;
   let signup_date = data.user?.signup_date;
   let role = data.user?.role;
+  let file: File;
 
   // the submit function shoud just reload the page
 </script>
@@ -17,7 +18,12 @@
 
 <h1 class="text-center font-extrabold text-xl">User Account Settings</h1>
 <div class="flex justify-center">
-  <form method="post" use:enhance class="w-full max-w-xs">
+  <form
+    method="post"
+    use:enhance
+    class="w-full max-w-xs"
+    enctype="multipart/form-data"
+  >
     <label for="username">Username</label>
     <input
       bind:value={username}
@@ -49,6 +55,14 @@
       id="icon"
       class="block mb-2 input input-bordered w-full max-w-xs"
     /><br />
+    <label for="profilePicture">Profile Picture</label>
+    <input
+      type="file"
+      bind:value={file}
+      name="profilePicture"
+      id="profilePicture"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
     <label for="password">Password</label>
     <input
       type="password"