Initial working!

src/lib/server/minio.ts

@@ -0,0 +1,11 @@
+import { Client } from "minio";
+
+const minioClient = new Client({
+  endPoint: "localhost",
+  port: 9000,
+  useSSL: false,
+  accessKey: "minioadmin",
+  secretKey: "minioadmin",
+});
+
+export default minioClient;

src/routes/api/upload/+server.ts

@@ -0,0 +1,54 @@
+// src/routes/api/upload.js
+
+import minioClient from "$lib/server/minio.js";
+import type { RequestEvent } from "@sveltejs/kit";
+import { generateId } from "lucia";
+
+export async function POST(event: RequestEvent): Promise<Response> {
+  try {
+    const contentType = event.request.headers.get("content-type") ?? "";
+    const fileExtension = contentType.split("/").pop();
+    const fileName = `${generateId(25)}.${fileExtension}`;
+
+    console.log(fileName);
+
+    const fileBuffer = await event.request.arrayBuffer();
+    const metaData = {
+      "Content-Type": contentType,
+    };
+
+    const found: Boolean = await minioClient.bucketExists("profile-pics");
+
+    if (!found) {
+      await minioClient.makeBucket("profile-pics");
+    }
+
+    await minioClient.putObject(
+      "profile-pics",
+      fileName,
+      Buffer.from(fileBuffer)
+    );
+
+    const fileUrl = await minioClient.presignedGetObject(
+      "profile-pics",
+      fileName
+    );
+
+    console.log(fileUrl);
+
+    return new Response(JSON.stringify({ fileUrl }), {
+      status: 200,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  } catch (error) {
+    console.error(error);
+    return new Response(JSON.stringify({ error: "Error occured" }), {
+      status: 500,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+}

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"