Working on the s3 feature.

app/api/images/[fileName]/route.ts

@@ -2,9 +2,17 @@ import path from "path";
 import fs from "fs/promises";
 import { NextResponse } from "next/server";
 
-export async function GET({ params }: { params: Promise<{ fileName: string }> }) {
+export async function GET(
+    request: Request,
+    {params}: { params: Promise<{ fileName: string }> }
+) {
+
     try {
         const fileName = (await params).fileName;
+
+
+        console.log("fileName", fileName);
+
         const filePath = path.join(process.cwd(), "private/uploads/images", fileName);
 
         // Check if the file exists

docker-compose.yml

@@ -53,16 +53,19 @@ services:
 #            - db
 
     s3:
+        container_name: s3-portabase-dev
         image: docker.io/bitnami/minio:latest
         ports:
             - "9000:9000"
             - "9001:9001"
         volumes:
             - minio_data:/data
+
         environment:
             - MINIO_ROOT_USER=${S3_ACCESS_KEY}
             - MINIO_ROOT_PASSWORD=${S3_SECRET_KEY}
             - MINIO_DEFAULT_BUCKETS=${S3_BUCKET_NAME}
+            - MINIO_BROWSER=on
 
 volumes:
     postgres-data:

src/components/wrappers/dashboard/admin/admin-storage-tab/settings-storage-tab.tsx

@@ -9,8 +9,11 @@ import { useMutation } from "@tanstack/react-query";
 import {checkConnexionToS3} from "@/features/upload/public/upload.action";
 import {toast} from "sonner";
 import {useRouter} from "next/navigation";
-import { updateStorageSettingsAction } from "@/components/wrappers/dashboard/admin/admin-storage-tab/storage-s3/s3-form.action";
+import {
+    updateStorageSettingsAction
+} from "@/components/wrappers/dashboard/admin/admin-storage-tab/storage-s3/s3-form.action";
 import {Setting} from "@/db/schema/00_setting";
+import {S3FormType} from "@/components/wrappers/dashboard/admin/admin-storage-tab/storage-s3/s3-form.schema";
 
 export type SettingsStorageTabProps = {
     settings: Setting;
@@ -48,6 +51,16 @@ export const SettingsStorageTab = (props: SettingsStorageTabProps) => {
         await updateMutation.mutateAsync();
     };
 
+    const extractS3FormValues = (settings: Setting): S3FormType | undefined => {
+        if (!settings.s3EndPointUrl) return undefined;
+        return {
+            s3EndPointUrl: settings.s3EndPointUrl,
+            s3AccessKeyId: settings.s3AccessKeyId!,
+            s3SecretAccessKey: settings.s3SecretAccessKey!,
+            S3BucketName: settings.S3BucketName!,
+        };
+    };
+
     return (
         <div className="flex flex-col h-full  py-4">
             <h1>Settings for Portabase storage</h1>
@@ -55,7 +68,8 @@ export const SettingsStorageTab = (props: SettingsStorageTabProps) => {
                 <Info className="h-4 w-4"/>
                 <AlertTitle>Informations</AlertTitle>
                 <AlertDescription>
-                    Actually you can only store you data in one place : s3 compatible or in local. For exemple you cannot choose to store images in one place
+                    Actually you can only store you data in one place : s3 compatible or in local. For exemple you
+                    cannot choose to store images in one place
                     and .dump files in another.
                 </AlertDescription>
             </Alert>
@@ -86,7 +100,7 @@ export const SettingsStorageTab = (props: SettingsStorageTabProps) => {
                 </div>
                 {isSwitched && (
                     <div className="mt-5">
-                        <StorageS3Form defaultValues={props.settings.s3EndPointUrl ? props.settings : null} />
+                        <StorageS3Form defaultValues={extractS3FormValues(props.settings)}/>
                     </div>
                 )}
             </div>

src/components/wrappers/dashboard/profile/avatar/avatar-with-upload.tsx

@@ -53,6 +53,8 @@ export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
         submitImage.mutate(file);
     };
 
+
+
     return (
         <div className="relative ">
             <Avatar className="size-14 mr-3 ">

src/utils/s3-file-management.ts

@@ -5,37 +5,6 @@ import {db} from "@/db";
 import * as drizzleDb from "@/db";
 import {eq} from "drizzle-orm";
 
-// const settings = await prisma.settings.findUnique({
-//     where:{
-//         name: "system"
-//     }
-// })
-
-// Create a new Minio client with the S3 endpoint, access key, and secret key
-// export const s3Client = env.NODE_ENV === "production" ?
-//     new Minio.Client({
-//         endPoint: env.S3_ENDPOINT ?? "",
-//         accessKey: env.S3_ACCESS_KEY ?? "",
-//         secretKey: env.S3_SECRET_KEY ?? "",
-//     }) : new Minio.Client({
-//         endPoint: env.S3_ENDPOINT ?? "",
-//         port: Number(env.S3_PORT ?? 0),
-//         accessKey: env.S3_ACCESS_KEY ?? "",
-//         secretKey: env.S3_SECRET_KEY ?? "",
-//         useSSL: env.S3_USE_SSL === 'true'
-//     })
-// export const s3Client = env.NODE_ENV === "production" ?
-//     new Minio.Client({
-//         endPoint: settings.s3EndPointUrl ?? "",
-//         accessKey: settings.s3AccessKeyId ?? "",
-//         secretKey: settings.s3SecretAccessKey ?? "",
-//     }) : new Minio.Client({
-//         endPoint: settings.s3EndPointUrl ?? "",
-//         port: Number(env.S3_PORT ?? 0),
-//         accessKey: settings.s3AccessKeyId ?? "",
-//         secretKey: settings.s3SecretAccessKey ?? "",
-//         useSSL: env.S3_USE_SSL === 'true'
-//     })
 
 async function getS3Client() {
     const settings = await db