Added: multifile support, edit functions

Author: ironexdev

README.md

@@ -21,11 +21,12 @@ Run it on localhost to optimize and upload images to S3. Retrieved links of uplo
             "Action": [
                 "s3:GetObject",
                 "s3:PutObject",
+                "s3:DeleteObject",
                 "s3:ListBucket"
             ],
             "Resource": [
-                "arn:aws:s3:::your-bucket-name",
-                "arn:aws:s3:::your-bucket-name/*"
+                "arn:aws:s3:::blazing-peon-images",
+                "arn:aws:s3:::blazing-peon-images/*"
             ]
         }
     ]
@@ -47,5 +48,5 @@ Run it on localhost to optimize and upload images to S3. Retrieved links of uplo
 3) **Fill in quality and size** <small>(at least height or width has to be filled in, Sharp will calculate the other parameter automatically)</small>
 4) **Click optimize** <small>-> optimized image will be previewed in the Upload Form</small>
 - <small>#2 Upload Form</small>
-5) **Fill in the new image name** (technically S3 namespace) <small>-> it will be automatically prefixed with assets/images/</small>
+5) **Fill in the new image name** (technically S3 namespace) <small>-> it will be automatically prefixed with assets/</small>
 6) **Click upload** <small>-> image will be uploaded to S3 bucket and Cloudfront link will be returned</small>

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

@@ -0,0 +1,52 @@
+import { S3Client, DeleteObjectsCommand } from "@aws-sdk/client-s3";
+import { NextResponse } from "next/server";
+
+const s3Client = new S3Client({
+  region: process.env.AWS_S3_REGION,
+  credentials: {
+    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
+    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
+  },
+});
+
+export async function DELETE(request: Request) {
+  try {
+    type DeleteRequestBody = {
+      keys: string[];
+    };
+
+    const { keys }: DeleteRequestBody =
+      (await request.json()) as DeleteRequestBody;
+
+    if (!keys || keys.length === 0) {
+      return new NextResponse("No keys provided", { status: 400 });
+    }
+
+    const deleteParams = {
+      Bucket: process.env.AWS_S3_BUCKET_NAME!,
+      Delete: {
+        Objects: keys.map((key) => ({ Key: key })),
+        Quiet: true,
+      },
+    };
+
+    const deleteCommand = new DeleteObjectsCommand(deleteParams);
+    const data = await s3Client.send(deleteCommand);
+
+    if (data.Errors && data.Errors.length > 0) {
+      return new NextResponse(
+        `Failed to delete some objects: ${data.Errors.map(
+          (error) => `${error.Key}: ${error.Message}`,
+        ).join(", ")}`,
+        { status: 500 },
+      );
+    }
+
+    return new NextResponse("Objects deleted successfully", { status: 200 });
+  } catch (error) {
+    console.error("Error deleting objects:", error);
+    return new NextResponse("An error occurred while deleting objects", {
+      status: 500,
+    });
+  }
+}

src/app/api/objects/route.ts

@@ -15,7 +15,7 @@ export async function GET() {
   try {
     const params = {
       Bucket: process.env.AWS_S3_BUCKET_NAME!,
-      Prefix: "assets/images/",
+      Prefix: "assets/",
     };
 
     const data = await s3Client.send(new ListObjectsV2Command(params));

src/app/api/upload/route.ts

@@ -33,15 +33,15 @@ export async function POST(request: Request) {
 
     const uploadParams = {
       Bucket: process.env.AWS_S3_BUCKET_NAME!,
-      Key: `assets/images/${folder}/${imageName}`,
+      Key: `assets/${folder}/${imageName}`,
       Body: buffer,
       ContentType: file.type,
       CacheControl: "max-age=31536000",
     };
 
     await s3Client.send(new PutObjectCommand(uploadParams));
 
-    const imageUrl = `https://${process.env.AWS_CLOUDFRONT_DISTRIBUTION}.cloudfront.net/assets/images/${folder}/${imageName}`;
+    const imageUrl = `https://${process.env.AWS_CLOUDFRONT_DISTRIBUTION}.cloudfront.net/assets/${folder}/${imageName}`;
 
     uploadedFiles.push({ imageName: `${folder}/${imageName}`, imageUrl });
   }

src/app/components/image-optimize-form.tsx

@@ -45,6 +45,9 @@ export default function ImageOptimizeForm({
       aspectRatio: number;
     }[]
   >([]);
+  const [originalImageNames, setLocalOriginalImageNames] = useState<string[]>(
+    [],
+  );
   const [isQualityEnabled, setIsQualityEnabled] = useState(true);
   const [isResizeEnabled, setIsResizeEnabled] = useState(true);
   const [outputFormat, setOutputFormat] = useState<string>("webp");
@@ -60,6 +63,7 @@ export default function ImageOptimizeForm({
         format: string;
         aspectRatio: number;
       }[] = [];
+      const originalNamesTemp: string[] = [];
 
       files.forEach((file, index) => {
         const reader = new FileReader();
@@ -77,11 +81,13 @@ export default function ImageOptimizeForm({
             };
             previewsTemp[index] = reader.result as string;
             imageInfosTemp[index] = imageInfoData;
+            originalNamesTemp[index] = file.name;
 
             // Only update state when all files are processed
             if (previewsTemp.length === files.length) {
               setPreviews([...previewsTemp]);
               setLocalImageInfos([...imageInfosTemp]);
+              setLocalOriginalImageNames([...originalNamesTemp]);
             }
           };
         };
@@ -90,6 +96,7 @@ export default function ImageOptimizeForm({
     } else {
       setPreviews([]);
       setLocalImageInfos([]);
+      setLocalOriginalImageNames([]);
     }
   }, [files]);
 
@@ -106,6 +113,47 @@ export default function ImageOptimizeForm({
     }
   };
 
+  const handleClone = () => {
+    if (selectedImageIndex < 0 || selectedImageIndex >= files.length) return;
+
+    const originalFile = files[selectedImageIndex]!;
+    const clonedFile = new File(
+      [originalFile],
+      generateCloneName(originalFile.name),
+      {
+        type: originalFile.type,
+        lastModified: originalFile.lastModified,
+      },
+    );
+
+    const updatedFiles = [...files, clonedFile];
+    setFiles(updatedFiles);
+
+    const newPreviewUrl = previews[selectedImageIndex]!;
+    const newImageInfo = { ...imageInfos[selectedImageIndex]! };
+    const newOriginalName = clonedFile.name;
+
+    setPreviews([...previews, newPreviewUrl]);
+    setLocalImageInfos([...imageInfos, newImageInfo]);
+    setLocalOriginalImageNames([...originalImageNames, newOriginalName]);
+
+    setSelectedImageIndex(updatedFiles.length - 1); // Select the cloned image
+  };
+
+  const generateCloneName = (originalName: string) => {
+    const extension = originalName.slice(originalName.lastIndexOf("."));
+    const baseName = originalName.slice(0, originalName.lastIndexOf("."));
+    let cloneCount = 1;
+
+    let newName = `${baseName}-${cloneCount}${extension}`;
+    while (originalImageNames.includes(newName)) {
+      cloneCount++;
+      newName = `${baseName}-${cloneCount}${extension}`;
+    }
+
+    return newName;
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (files.length === 0) return;
@@ -216,6 +264,13 @@ export default function ImageOptimizeForm({
               </option>
             ))}
           </select>
+          <button
+            type="button"
+            className="mt-2 w-full rounded bg-yellow-500 py-2 text-white hover:bg-yellow-600"
+            onClick={handleClone}
+          >
+            Clone
+          </button>
         </div>
       )}
 

src/app/components/image-upload-form.tsx

@@ -132,7 +132,7 @@ export default function ImageUploadForm({
             )}
           <input
             type="text"
-            placeholder="Folder (S3 namespace after assets/images/)"
+            placeholder="Folder (S3 namespace after assets/)"
             value={folderName}
             required
             onChange={(e) => setFolderName(e.target.value)}
@@ -158,7 +158,7 @@ export default function ImageUploadForm({
       )}
 
       {uploadedImageUrls.length > 0 && (
-        <div className="mt-4 rounded border bg-gray-100 p-4">
+        <div className="rounded border bg-gray-100 p-4">
           <h3 className="text-md font-bold">Latest uploaded images:</h3>
           <ul>
             {uploadedImageUrls.map((url, index) => (