Fixed: broken stuff, added styling, added tanstack-query and react-hook-form

Author: ironexdev

.env.example

@@ -1,6 +1,6 @@
 NODE_ENV=development
 AWS_S3_REGION=us-east-1
-AWS_S3_BUCKET_NAME=your-bucket-name
+NEXT_PUBLIC_AWS_S3_BUCKET_NAME=your-bucket-name
 AWS_ACCESS_KEY_ID=key
 AWS_SECRET_ACCESS_KEY=secret
 AWS_CLOUDFRONT_DISTRIBUTION=abcdef12345678.cloudfront.net

package.json

@@ -11,11 +11,16 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.633.0",
+    "@tanstack/react-query": "^5.52.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.429.0",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.52.2",
     "sharp": "^0.33.5",
-    "sonner": "^1.5.0"
+    "sonner": "^1.5.0",
+    "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
     "@types/eslint": "^9.6.0",

pnpm-lock.yaml

@@ -23,7 +23,7 @@ export async function DELETE(request: Request) {
     }
 
     const deleteParams = {
-      Bucket: process.env.AWS_S3_BUCKET_NAME!,
+      Bucket: process.env.NEXT_PUBLIC_AWS_S3_BUCKET_NAME!,
       Delete: {
         Objects: keys.map((key) => ({ Key: key })),
         Quiet: true,

src/app/api/delete-objects/route.ts

@@ -0,0 +1,110 @@
+import { type NextRequest, NextResponse } from "next/server";
+import sharp from "sharp";
+
+interface ImageInfo {
+  title: string;
+  width: number | null;
+  height: number | null;
+  quality: number;
+  format: string;
+  raw: boolean;
+}
+
+interface ProcessedImage {
+  title: string;
+  previewUrl: string;
+  sizeKb: number;
+  format: string;
+  height: number;
+  width: number;
+  aspectRatio: number;
+  raw: boolean;
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const formData = await req.formData();
+    const processedImages: ProcessedImage[] = [];
+
+    // Iterate through formData entries
+    for (const [key, value] of formData.entries()) {
+      if (key.startsWith("image")) {
+        const index = key.replace("image", "");
+        const imageFile = value as File;
+        const imageInfo: ImageInfo = parseWithReviver(
+          formData.get(`modification${index}`) as string,
+        ) as ImageInfo;
+
+        const processedImage = await processImage(imageFile, imageInfo);
+        processedImages.push(processedImage);
+      }
+    }
+
+    return NextResponse.json(processedImages);
+  } catch (error) {
+    console.error("Error processing images:", error);
+    return NextResponse.json(
+      { error: "Failed to process images" },
+      { status: 500 },
+    );
+  }
+}
+
+async function processImage(
+  imageFile: File,
+  imageInfo: ImageInfo,
+): Promise<ProcessedImage> {
+  const fileBuffer = await imageFile.arrayBuffer();
+  const image = sharp(Buffer.from(fileBuffer), { animated: false });
+
+  const metadata = await image.metadata();
+  const raw = imageInfo.raw;
+  const outputTitle = imageInfo.title;
+  let outputWidth;
+  let outputHeight;
+  let outputFormat;
+  let quality;
+
+  if (raw) {
+    outputHeight = metadata.height;
+    outputWidth = metadata.width;
+    outputFormat = metadata.format;
+    quality = 100;
+  } else {
+    outputHeight = imageInfo.height ?? metadata.height;
+    outputWidth = imageInfo.width ?? metadata.width;
+    outputFormat = imageInfo.format ?? metadata.format;
+    quality = imageInfo.quality;
+  }
+
+  // Process image with sharp
+  const processedImageBuffer = raw
+    ? await image.toBuffer()
+    : await image
+        .resize(outputWidth, outputHeight)
+        .toFormat(outputFormat as keyof sharp.FormatEnum, {
+          quality,
+        })
+        .toBuffer();
+
+  return {
+    title: outputTitle,
+    previewUrl: `data:image/${outputFormat};base64,${processedImageBuffer.toString("base64")}`,
+    sizeKb: processedImageBuffer.length / 1024,
+    format: outputFormat,
+    height: outputHeight,
+    width: outputWidth,
+    aspectRatio: outputWidth / outputHeight,
+    raw,
+  };
+}
+
+function parseWithReviver(jsonString: string) {
+  return JSON.parse(jsonString, (key, value) => {
+    if (key === "quality" || key === "width" || key === "height") {
+      return value !== null ? Number(value) : null;
+    }
+
+    return value as unknown;
+  }) as unknown;
+}

src/app/api/modify/route.ts

@@ -1,5 +1,3 @@
-// objects/route.ts
-
 import { NextResponse } from "next/server";
 import { S3Client, ListObjectsV2Command } from "@aws-sdk/client-s3";
 
@@ -11,11 +9,25 @@ const s3Client = new S3Client({
   },
 });
 
-export async function GET() {
+export async function GET(request: Request) {
+  const url = new URL(request.url);
+  const type = url.searchParams.get("type") ?? "server";
+
+  let bucketName;
+  let prefix;
+
+  if (type === "server") {
+    bucketName = process.env.NEXT_PUBLIC_AWS_S3_BUCKET_NAME;
+    prefix = "assets/";
+  } else {
+    bucketName = process.env.NEXT_PUBLIC_AWS_S3_STORAGE_BUCKET_NAME;
+    prefix = "images/assets/";
+  }
+
   try {
     const params = {
-      Bucket: process.env.AWS_S3_BUCKET_NAME!,
-      Prefix: "assets/",
+      Bucket: bucketName,
+      Prefix: prefix,
     };
 
     const data = await s3Client.send(new ListObjectsV2Command(params));
@@ -36,7 +48,10 @@ export async function GET() {
             : "Unknown date";
 
           return {
-            url: `https://${process.env.AWS_CLOUDFRONT_DISTRIBUTION}.cloudfront.net/${item.Key}`,
+            url:
+              type === "storage"
+                ? ""
+                : `https://${process.env.AWS_CLOUDFRONT_DISTRIBUTION}.cloudfront.net/${item.Key}`,
             key: item.Key,
             sizeInKB,
             lastModified,