Fixed: uploading large and raw images

ironexdev · ironexdev · commit 29cf437cea58 · 2024-08-23T16:39:52.000+02:00
diff --git a/src/app/api/modify/route.ts b/src/app/api/modify/route.ts
@@ -10,7 +10,7 @@ interface ImageInfo {
   raw: boolean;
 }
 
-interface ProcessedImage {
+interface ModifiedImage {
   title: string;
   previewUrl: string;
   sizeKb: number;
@@ -24,7 +24,7 @@ interface ProcessedImage {
 export async function POST(req: NextRequest) {
   try {
     const formData = await req.formData();
-    const processedImages: ProcessedImage[] = [];
+    const modifiedImages: ModifiedImage[] = [];
 
     // Iterate through formData entries
     for (const [key, value] of formData.entries()) {
@@ -35,42 +35,45 @@ export async function POST(req: NextRequest) {
           formData.get(`modification${index}`) as string,
         ) as ImageInfo;
 
-        const processedImage = await processImage(imageFile, imageInfo);
-        processedImages.push(processedImage);
+        const modifiedImage = await modifyImage(imageFile, imageInfo);
+        modifiedImages.push(modifiedImage);
       }
     }
 
-    return NextResponse.json(processedImages);
+    return NextResponse.json(modifiedImages);
   } catch (error) {
-    console.error("Error processing images:", error);
+    console.error("Error modifying images:", error);
     return NextResponse.json(
-      { error: "Failed to process images" },
+      { error: "Failed to modify images" },
       { status: 500 },
     );
   }
 }
 
-async function processImage(
+async function modifyImage(
   imageFile: File,
   imageInfo: ImageInfo,
-): Promise<ProcessedImage> {
+): Promise<ModifiedImage> {
   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;
+  let imageBuffer;
+  let modifiedInfo;
 
   if (raw) {
-    outputHeight = metadata.height;
-    outputWidth = metadata.width;
-    outputFormat = metadata.format;
-    quality = 100;
+    imageBuffer = fileBuffer;
+    outputHeight = imageInfo.height!;
+    outputWidth = imageInfo.width!;
+    outputFormat = imageInfo.format;
   } else {
+    const image = sharp(Buffer.from(fileBuffer), { animated: false });
+    const metadata = await image.metadata();
+
     if (!imageInfo.height && !imageInfo.width) {
       outputHeight = metadata.height;
       outputWidth = metadata.width;
@@ -83,28 +86,37 @@ async function processImage(
 
     outputFormat = imageInfo.format ?? metadata.format;
     quality = imageInfo.quality;
-  }
 
-  if (!raw) {
     image
       .resize(outputWidth, outputHeight)
       .toFormat(outputFormat as keyof sharp.FormatEnum, {
         quality,
       });
-  }
 
-  const { data: processedImageBuffer, info } = await image.toBuffer({
-    resolveWithObject: true,
-  });
+    const {
+      data,
+      info,
+    }: {
+      data: Buffer;
+      info: { height: number; width: number; format: string };
+    } = await image.toBuffer({
+      resolveWithObject: true,
+    });
+
+    modifiedInfo = info;
+    imageBuffer = data;
+
+    outputHeight = modifiedInfo.height;
+    outputWidth = modifiedInfo.width;
+    outputFormat = modifiedInfo.format;
+  }
 
-  outputHeight = info.height;
-  outputWidth = info.width;
-  outputFormat = info.format;
+  const buffer = Buffer.from(imageBuffer).toString("base64");
 
   return {
     title: outputTitle,
-    previewUrl: `data:image/${outputFormat};base64,${processedImageBuffer.toString("base64")}`,
-    sizeKb: processedImageBuffer.length / 1024,
+    previewUrl: `data:image/${outputFormat};base64,${buffer}`,
+    sizeKb: imageBuffer.byteLength / 1024,
     format: outputFormat,
     height: outputHeight,
     width: outputWidth,
diff --git a/src/app/api/upload/route.ts b/src/app/api/upload/route.ts
@@ -2,10 +2,9 @@ import { type NextRequest, NextResponse } from "next/server";
 import { s3Client } from "@/lib/s3-client";
 import { PutObjectCommand } from "@aws-sdk/client-s3";
 
-interface ImageUploadInfo {
+interface Info {
   title: string;
   format: string;
-  previewUrl: string;
   bucket: string;
   folder: string;
 }
@@ -17,9 +16,13 @@ export async function POST(req: NextRequest) {
     const uploadResults: Array<{ imageName: string; imageUrl: string }> = [];
 
     for (const [key, value] of formData.entries()) {
-      if (key.startsWith("processedImage")) {
-        const imageUploadInfo = JSON.parse(value as string) as ImageUploadInfo;
-        const uploadResult = await uploadImageToS3(imageUploadInfo);
+      if (key.startsWith("info")) {
+        const index = key.replace("info", "");
+
+        const info = JSON.parse(value as string) as Info;
+        const image = formData.get(`image${index}`) as File;
+
+        const uploadResult = await uploadImageToS3(image, info);
 
         uploadResults.push(uploadResult);
       }
@@ -43,40 +46,29 @@ export async function POST(req: NextRequest) {
 }
 
 async function uploadImageToS3(
-  imageUploadInfo: ImageUploadInfo,
+  imageFile: File,
+  info: Info,
 ): Promise<{ imageName: string; imageUrl: string }> {
-  const imageFile = base64ToFile(
-    imageUploadInfo.previewUrl,
-    imageUploadInfo.title,
-  );
-
   let bucketName;
   let key;
 
   // NEXT_PUBLIC_AWS_S3_STORAGE_BUCKET_NAME is optional
   if (
     !process.env.NEXT_PUBLIC_AWS_S3_STORAGE_BUCKET_NAME ||
-    imageUploadInfo.bucket === "server"
+    info.bucket === "server"
   ) {
     bucketName = process.env.NEXT_PUBLIC_AWS_S3_BUCKET_NAME;
-    key = `assets/${imageUploadInfo.folder}/${imageUploadInfo.title}`.replace(
-      /\/\//g,
-      "/",
-    );
+    key = `assets/${info.folder}/${info.title}`.replace(/\/\//g, "/");
   } else {
     bucketName = process.env.NEXT_PUBLIC_AWS_S3_STORAGE_BUCKET_NAME;
-    key =
-      `images/assets/${imageUploadInfo.folder}/${imageUploadInfo.title}`.replace(
-        /\/\//g,
-        "/",
-      );
+    key = `images/assets/${info.folder}/${info.title}`.replace(/\/\//g, "/");
   }
 
   const uploadParams = {
     Bucket: bucketName,
     Key: key,
     Body: Buffer.from(await imageFile.arrayBuffer()),
-    ContentType: `image/${imageUploadInfo.format}`,
+    ContentType: `image/${info.format}`,
     CacheControl: "max-age=31536000",
   };
 
@@ -89,31 +81,3 @@ async function uploadImageToS3(
     imageUrl,
   };
 }
-
-function base64ToFile(base64String: string, fileName: string): File {
-  const [mimePart, dataPart] = base64String.split(",");
-
-  if (!mimePart || !dataPart) {
-    throw new Error("Invalid base64 string");
-  }
-
-  const mimeTypeMatch = /:(.*?);/.exec(mimePart);
-
-  if (!mimeTypeMatch?.[1]) {
-    throw new Error("Invalid MIME type");
-  }
-
-  const mimeType = mimeTypeMatch[1];
-
-  const byteCharacters = atob(dataPart);
-  const byteNumbers = new Array(byteCharacters.length);
-
-  for (let i = 0; i < byteCharacters.length; i++) {
-    byteNumbers[i] = byteCharacters.charCodeAt(i);
-  }
-
-  const byteArray = new Uint8Array(byteNumbers);
-  const blob = new Blob([byteArray], { type: mimeType });
-
-  return new File([blob], fileName, { type: mimeType });
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -11,6 +11,7 @@ import ImageModifyForm, {
 } from "@/components/image-modify-form";
 import { ChevronLeft, Loader } from "lucide-react";
 import Header from "@/components/header";
+import { base64ToFile } from "@/lib/utils";
 
 interface UploadFormData {
   title: string;
@@ -151,7 +152,7 @@ export default function HomePage() {
     onSuccess: (data) => {
       setProcessedImages(data);
       setStep(2);
-      toast.success("Images processed successfully! Now upload them.");
+      toast.success("Images were modified successfully! Now upload them.");
     },
     onError: (error: unknown) => {
       if (error instanceof Error) {
@@ -217,13 +218,16 @@ export default function HomePage() {
       const form = uploadForms[index];
 
       if (form) {
+        const { previewUrl, ...rest } = image;
         const requestData = {
-          ...image,
+          ...rest,
           folder: form.folder,
           title: form.title,
           bucket: form.bucket,
         };
-        formData.append(`processedImage${index}`, JSON.stringify(requestData));
+
+        formData.append(`image${index}`, base64ToFile(previewUrl, form.title));
+        formData.append(`info${index}`, JSON.stringify(requestData));
       }
     });
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -27,3 +27,30 @@ export function getFileFormat(file: File): string {
 
   throw new Error("Unable to determine file format from MIME type.");
 }
+
+export function base64ToFile(base64: string, filename: string): File {
+  const base64Parts = base64.split(",");
+
+  if (base64Parts.length < 2) {
+    throw new Error("Invalid base64 string");
+  }
+
+  const byteString = atob(base64Parts[1]!);
+
+  const mimeParts = base64Parts[0]!.split(":");
+  if (mimeParts.length < 2) {
+    throw new Error("Invalid MIME type in base64 string");
+  }
+
+  const mimeString = mimeParts[1]!.split(";")[0];
+
+  const byteNumbers = new Array(byteString.length);
+  for (let i = 0; i < byteString.length; i++) {
+    byteNumbers[i] = byteString.charCodeAt(i);
+  }
+
+  const byteArray = new Uint8Array(byteNumbers);
+
+  const blob = new Blob([byteArray], { type: mimeString });
+  return new File([blob], filename, { type: mimeString });
+}
