Use data directory to save images

src/app/api/images/[id]/route.ts

@@ -1,6 +1,54 @@
-import { deleteImageById } from '@/lib/data';
+import { imagesDir } from '@/const/api';
+import { deleteImageById, getImageDataById } from '@/lib/data';
 import { getSession } from '@/lib/session';
+import fs from 'fs/promises';
 import { NextRequest, NextResponse } from 'next/server';
+import path from 'path';
+
+export async function GET(request: NextRequest, context: { params: Promise<{ id: string }> }) {
+  try {
+    const { id } = await context.params;
+    const imageData = await getImageDataById(id);
+
+    if (!imageData) {
+      return NextResponse.json({ error: 'Image not found in data' }, { status: 404 });
+    }
+
+    const filePath = path.join(imagesDir, imageData.relative_path);
+
+    try {
+      await fs.access(filePath);
+    } catch (error) {
+      console.error(error);
+      return NextResponse.json({ error: 'Image not found' }, { status: 404 });
+    }
+
+    const imageBuffer = await fs.readFile(filePath);
+
+    const ext = path.extname(id).toLowerCase();
+    const mimeTypes: { [key: string]: string } = {
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.png': 'image/png',
+      '.gif': 'image/gif',
+      '.webp': 'image/webp',
+    };
+    const contentType = mimeTypes[ext] || 'application/octet-stream';
+
+    const headers = new Headers();
+    headers.set('Content-Type', contentType);
+    headers.set('Content-Disposition', `attachment; filename="${imageData.relative_path}"`);
+
+    return new NextResponse(new Uint8Array(imageBuffer), {
+      status: 200,
+      statusText: 'OK',
+      headers,
+    });
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+  }
+}
 
 export async function DELETE(request: NextRequest, context: { params: Promise<{ id: string }> }) {
   const session = await getSession();

src/components/Gallery.tsx

@@ -131,7 +131,7 @@ export default function Gallery({ initialImages }: GalleryProps) {
               width={image.aspect_ratio > HORIZONTAL_ASPECT_RATIO ? image.width : 700}
               height={image.aspect_ratio < VERTICAL_ASPECT_RATIO ? image.height : 700}
               loading="lazy"
-              src={`/images/${image.relative_path}`}
+              src={`/api/images/${image.id}`}
               alt={image.aspect_ratio?.toString()}
               onClick={() => setFullScreenImage(`/images/${image.relative_path}`)}
             />

src/components/ImageManager.tsx

@@ -117,7 +117,7 @@ export default function ImageManager({ images: initialImages, tags: initialTags
             {images.map((image) => (
               <tr key={image.id}>
                 <td>
-                  <Image src={`/images/${image.relative_path}`} height={50} width={50} alt={image.id} />
+                  <Image src={`/api/images/${image.id}`} height={50} width={50} alt={image.id} />
                 </td>
                 <td>{image.id}</td>
                 <td>

src/const/api.ts

@@ -1,4 +1,5 @@
-import path from "path";
+import path from 'path';
 
-export const imagesDir = path.join(process.cwd(), 'public', 'images');
-export const jsonPath = path.join(process.cwd(), 'data', 'images.json');
+const dataDir = path.join(process.cwd(), 'data');
+export const imagesDir = path.join(dataDir, 'images');
+export const jsonPath = path.join(dataDir, 'images.json');

src/lib/data.ts

@@ -23,6 +23,10 @@ export async function getImageData(): Promise<ImageMeta[]> {
   }
 }
 
+export async function getImageDataById(id: string): Promise<ImageMeta | undefined> {
+  return (await getImageData()).find((image) => image.id === id);
+}
+
 export function stringToTags(string: string): string[] {
   return string
     ? string