Key independent system

.env.example

@@ -5,5 +5,5 @@ DATABASE_URL=
 
 AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
-AWS_S3_ENDPOINT=
+VITE_AWS_S3_ENDPOINT=
 AWS_REGION=

docker-compose.yml

@@ -11,9 +11,9 @@ services:
       - SKIP_DB_WAIT=false
       - AWS_ACCESS_KEY_ID=minioadmin
       - AWS_SECRET_ACCESS_KEY=minioadmin
-      - AWS_S3_ENDPOINT=http://minio:9000
-      # MINIO_CLIENT_OVERRIDE: Only necessary if using minio here with this docker compose file. This is becaues the client needs a different endpoint than the server because its not in the docker network.
-      - MINIO_CLIENT_OVERRIDE=http://localhost:9000
+      - VITE_AWS_S3_ENDPOINT=http://minio:9000
+      # VITE_MINIO_CLIENT_OVERRIDE: Only necessary if using minio here with this docker compose file. This is becaues the client needs a different endpoint than the server because its not in the docker network.
+      - VITE_MINIO_CLIENT_OVERRIDE=http://localhost:9000
       - BODY_SIZE_LIMIT=Infinity # change this to a smaller value if you want to limit the size of uploaded files!
 
     depends_on:

src/lib/components/UserAvatar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
   import { goto } from "$app/navigation";
+  import { getObjectUrl } from "$lib";
   export let user: any;
 
   async function navToSettings() {
@@ -15,7 +16,7 @@
   <div class="avatar placeholder">
     <div class="bg-neutral text-neutral-content rounded-full w-10 ml-4">
       {#if user.icon}
-        <img src={user.icon} alt="" />
+        <img src={getObjectUrl("profile-pics", user.icon)} alt="" />
       {:else}
         <span class="text-2xl -mt-1">{user.first_name[0]}</span>
       {/if}

src/lib/index.ts

@@ -124,3 +124,45 @@ export async function getImage(adventureTitle: string) {
     return `Error fetching Wikipedia data for "${adventureTitle}".`;
   }
 }
+
+/**
+ * Returns the URL of an object in the specified bucket.
+ * @param bucketName - The name of the bucket.
+ * @param fileName - The name of the file.
+ * @returns The URL of the object.
+ */
+export const getObjectUrl = (bucketName: string, fileName: string): string => {
+  let objectUrl: string;
+  let endpoint: string = "";
+  if (import.meta.env.VITE_MINIO_CLIENT_OVERRIDE) {
+    endpoint = import.meta.env.VITE_MINIO_CLIENT_OVERRIDE as string;
+  } else {
+    endpoint = import.meta.env.VITE_AWS_S3_ENDPOINT as string;
+  }
+
+  // This code is not as clean as it could be, but it works for whats needed. Help is welcome to clean it up!
+  // Currently supports Amazon S3, Google Cloud Storage, DigitalOcean Spaces, and Supabase Storage as well as self-hosted MinIO.
+
+  if (endpoint.includes("amazonaws.com")) {
+    // Amazon S3
+    objectUrl = `https://${bucketName}.s3.${
+      import.meta.env.AWS_REGION
+    }.amazonaws.com/${fileName}`;
+  } else if (endpoint.includes("storage.googleapis.com")) {
+    // Google Cloud Storage
+    objectUrl = `https://storage.googleapis.com/${bucketName}/${fileName}`;
+  } else if (endpoint.includes("digitaloceanspaces.com")) {
+    // DigitalOcean Spaces
+    objectUrl = `https://${bucketName}.${endpoint}/${fileName}`;
+  } else if (endpoint.includes("supabase.co")) {
+    // Supabase Storage
+    endpoint = endpoint.replace("s3", "object/public"); // Remove the version
+    console.log(endpoint);
+    objectUrl = `${endpoint}/${bucketName}/${fileName}`;
+  } else {
+    // Default fallback
+    objectUrl = `${endpoint}/${bucketName}/${fileName}`;
+  }
+
+  return objectUrl as string;
+};

src/lib/server/s3.ts

@@ -19,7 +19,7 @@ const s3Config: S3ClientConfig = {
     accessKeyId: env.AWS_ACCESS_KEY_ID as string,
     secretAccessKey: env.AWS_SECRET_ACCESS_KEY as string,
   },
-  endpoint: env.AWS_S3_ENDPOINT, // Add the endpoint
+  endpoint: env.VITE_AWS_S3_ENDPOINT, // Add the endpoint
   forcePathStyle: true,
 };
 
@@ -53,7 +53,7 @@ export const ensureBucketExists = async (bucketName: string): Promise<void> => {
           {
             Effect: "Allow",
             Principal: "*", // This allows anyone (public)
-            Action: ["s3:GetBucketLocation", "s3:ListBucket"],
+            Action: "s3:GetBucketLocation",
             Resource: `arn:aws:s3:::${bucketName}`,
           },
           {
@@ -146,10 +146,10 @@ export const deleteObject = async (bucketName: string, fileName: string) => {
 export const getObjectUrl = (bucketName: string, fileName: string): string => {
   let objectUrl: string;
   let endpoint: string = "";
-  if (env.MINIO_CLIENT_OVERRIDE) {
-    endpoint = env.MINIO_CLIENT_OVERRIDE as string;
+  if (env.VITE_MINIO_CLIENT_OVERRIDE) {
+    endpoint = env.VITE_MINIO_CLIENT_OVERRIDE as string;
   } else {
-    endpoint = env.AWS_S3_ENDPOINT as string;
+    endpoint = env.VITE_AWS_S3_ENDPOINT as string;
   }
 
   // This code is not as clean as it could be, but it works for whats needed. Help is welcome to clean it up!

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

@@ -106,9 +106,11 @@ export async function POST(event: RequestEvent): Promise<Response> {
       Buffer.from(fileBuffer)
     );
 
+    const newKey = objectUrl.split("/").pop() as string;
+
     console.log(`File uploaded to ${objectUrl}`);
 
-    return new Response(JSON.stringify({ objectUrl }), {
+    return new Response(JSON.stringify({ objectUrl, key: newKey }), {
       status: 200,
       headers: {
         "Content-Type": "application/json",

src/routes/profile/+page.svelte

@@ -17,6 +17,7 @@
 {#if data.user.icon}
   <div class="avatar flex items-center justify-center">
     <div class="w-24 rounded">
+      <!-- svelte-ignore a11y-missing-attribute -->
       <img src={data.user.icon} class="w-24 rounded-full" />
     </div>
   </div>

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

@@ -79,8 +79,8 @@ export const actions: Actions = {
       });
 
       const data = await response.json();
-      console.log("DATA" + data.objectUrl);
-      icon = data.objectUrl;
+      console.log("DATA" + data.key);
+      icon = data.key;
 
       if (data.error) {
         throw error(400, {