Minio part 2

src/lib/components/UserAvatar.svelte

@@ -22,7 +22,7 @@
 <div class="dropdown dropdown-bottom dropdown-end" tabindex="0" role="button">
   <div class="avatar placeholder">
     <div class="bg-neutral text-neutral-content rounded-full w-10 ml-4">
-      <span class="text-2xl -mt-0.5">{icon}</span>
+      <img src={user.icon} alt="" />
     </div>
   </div>
   <!-- svelte-ignore a11y-missing-attribute -->

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

@@ -3,6 +3,7 @@
 import minioClient from "$lib/server/minio.js";
 import type { RequestEvent } from "@sveltejs/kit";
 import { generateId } from "lucia";
+import { MINIO_URL } from "$env/static/private";
 
 export async function POST(event: RequestEvent): Promise<Response> {
   try {
@@ -10,8 +11,6 @@ export async function POST(event: RequestEvent): Promise<Response> {
     const fileExtension = contentType.split("/").pop();
     const fileName = `${generateId(25)}.${fileExtension}`;
 
-    console.log(fileName);
-
     const fileBuffer = await event.request.arrayBuffer();
     const metaData = {
       "Content-Type": contentType,
@@ -21,6 +20,28 @@ export async function POST(event: RequestEvent): Promise<Response> {
 
     if (!found) {
       await minioClient.makeBucket("profile-pics");
+      // Set a bucket policy to allow public read access
+      const bucketPolicy = {
+        Version: "2012-10-17",
+        Statement: [
+          {
+            Effect: "Allow",
+            Principal: "*",
+            Action: ["s3:GetBucketLocation", "s3:ListBucket"],
+            Resource: `arn:aws:s3:::profile-pics`,
+          },
+          {
+            Effect: "Allow",
+            Principal: "*",
+            Action: "s3:GetObject",
+            Resource: `arn:aws:s3:::profile-pics/*`,
+          },
+        ],
+      };
+      await minioClient.setBucketPolicy(
+        "profile-pics",
+        JSON.stringify(bucketPolicy)
+      );
     }
 
     await minioClient.putObject(
@@ -34,9 +55,9 @@ export async function POST(event: RequestEvent): Promise<Response> {
       fileName
     );
 
-    console.log(fileUrl);
+    const publicUrl = `${MINIO_URL}/profile-pics/${fileName}`;
 
-    return new Response(JSON.stringify({ fileUrl }), {
+    return new Response(JSON.stringify({ publicUrl }), {
       status: 200,
       headers: {
         "Content-Type": "application/json",

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

@@ -28,7 +28,6 @@ export const actions: Actions = {
     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") as string;
 
@@ -68,7 +67,6 @@ export const actions: Actions = {
 
     if (password) {
       let hashedPassword = await new Argon2id().hash(password);
-      console.log(hashedPassword);
       await db
         .update(userTable)
         .set({
@@ -84,14 +82,14 @@ export const actions: Actions = {
       });
 
       const data = await response.json();
+      console.log("DATA" + data.publicUrl);
+      icon = data.publicUrl;
 
       if (data.error) {
         throw error(400, {
           message: "Error uploading profile picture",
         });
       }
-
-      console.log(data);
     }
 
     await db

src/routes/settings/+page.svelte

@@ -47,14 +47,6 @@
       id="last_name"
       class="block mb-2 input input-bordered w-full max-w-xs"
     /><br />
-    <label for="icon">Profile Icon (emoji)</label>
-    <input
-      type="emoji"
-      bind:value={icon}
-      name="icon"
-      id="icon"
-      class="block mb-2 input input-bordered w-full max-w-xs"
-    /><br />
     <label for="profilePicture">Profile Picture</label>
     <input
       type="file"