Added: image removal from modify form feature

Author: ironexdev

src/app/page.tsx

@@ -11,7 +11,6 @@ import ImageModifyForm, {
 } from "@/components/image-modify-form";
 import { ChevronLeft, Loader } from "lucide-react";
 import Header from "@/components/header";
-import * as process from "node:process";
 
 interface UploadFormData {
   title: string;
@@ -102,6 +101,44 @@ export default function HomePage() {
     setModifications((prevModifications) => [...prevModifications, data]);
   };
 
+  const handleRemove = (index: number) => {
+    const dt = new DataTransfer();
+
+    const inputElement = document.getElementById(
+      "image-selection",
+    ) as HTMLInputElement;
+
+    if (inputElement?.files) {
+      const { files } = inputElement;
+
+      for (let i = 0; i < files.length; i++) {
+        if (i !== index) {
+          dt.items.add(files[i]!);
+        }
+      }
+
+      inputElement.files = dt.files;
+
+      setImageFiles(Array.from(dt.files));
+
+      setImageMetas((prevMetas) => {
+        const newMetas = [...prevMetas];
+        newMetas.splice(index, 1);
+        return newMetas;
+      });
+
+      setModifications((prevModifications) => {
+        const newModifications = [...prevModifications];
+        newModifications.splice(index, 1);
+        return newModifications;
+      });
+
+      if (dt.files.length === 0) {
+        setInputFileKey((prev) => prev + 1);
+      }
+    }
+  };
+
   const processImagesMutation = useMutation({
     mutationFn: async (formData: FormData) => {
       const res = await fetch("/api/modify", {
@@ -232,11 +269,12 @@ export default function HomePage() {
           <div className="space-y-6">
             <input
               key={inputFileKey}
+              id="image-selection"
               type="file"
               multiple
               accept="image/*"
               onChange={handleImageSelection}
-              className="bg-input w-full rounded border border-primary p-2 text-primary"
+              className="w-full rounded border border-primary bg-input p-2 text-primary"
             />
             <div className="flex-start flex flex-wrap gap-10">
               {imageMetas.map((meta, index) => (
@@ -245,20 +283,21 @@ export default function HomePage() {
                   imageData={meta}
                   index={index}
                   onClone={handleClone}
+                  onRemove={handleRemove}
                   onChange={(data) => handleModificationChange(index, data)}
                 />
               ))}
             </div>
             {imageFiles.length > 0 && (
               <div className="flex">
                 <button
-                  className="bg-gradient-button disabled:bg-gradient-button-disabled disabled:text-disabled ml-auto mt-4 flex h-[40px] items-center rounded px-10 font-bold text-primary transition disabled:opacity-50"
+                  className="ml-auto mt-4 flex h-[40px] items-center rounded bg-gradient-button px-10 font-bold text-primary transition disabled:bg-gradient-button-disabled disabled:text-disabled disabled:opacity-50"
                   onClick={resetForms}
                 >
                   Reset
                 </button>
                 <button
-                  className="text-md bg-gradient-button disabled:bg-gradient-button-disabled disabled:text-disabled ml-5 mt-4 flex h-[40px] items-center rounded px-10 font-bold text-primary transition disabled:opacity-50"
+                  className="text-md ml-5 mt-4 flex h-[40px] items-center rounded bg-gradient-button px-10 font-bold text-primary transition disabled:bg-gradient-button-disabled disabled:text-disabled disabled:opacity-50"
                   onClick={handleModificationSubmit}
                   disabled={loading}
                 >
@@ -277,7 +316,7 @@ export default function HomePage() {
               <button
                 type="button"
                 onClick={() => setStep(1)}
-                className="bg-gradient-button mt-2 flex h-[40px] w-[200px] items-center justify-center rounded-md text-primary"
+                className="mt-2 flex h-[40px] w-[200px] items-center justify-center rounded-md bg-gradient-button text-primary"
               >
                 <ChevronLeft size={32} />
               </button>
@@ -293,19 +332,19 @@ export default function HomePage() {
             </div>
             <div className="flex">
               <button
-                className="bg-gradient-button disabled:bg-gradient-button-disabled disabled:text-disabled mt-4 flex h-[40px] items-center rounded px-10 font-bold text-primary transition disabled:opacity-50"
+                className="mt-4 flex h-[40px] items-center rounded bg-gradient-button px-10 font-bold text-primary transition disabled:bg-gradient-button-disabled disabled:text-disabled disabled:opacity-50"
                 onClick={resetForms}
               >
                 Reset
               </button>
               <button
-                className="bg-gradient-button disabled:bg-gradient-button-disabled disabled:text-disabled ml-auto mt-4 flex h-[40px] items-center rounded px-10 font-bold text-primary transition disabled:opacity-50"
+                className="ml-auto mt-4 flex h-[40px] items-center rounded bg-gradient-button px-10 font-bold text-primary transition disabled:bg-gradient-button-disabled disabled:text-disabled disabled:opacity-50"
                 onClick={handleDownload}
               >
                 Download
               </button>
               <button
-                className="bg-gradient-button disabled:bg-gradient-button-disabled disabled:text-disabled ml-5 mt-4 flex h-[40px] items-center rounded px-10 font-bold text-primary transition disabled:opacity-50"
+                className="ml-5 mt-4 flex h-[40px] items-center rounded bg-gradient-button px-10 font-bold text-primary transition disabled:bg-gradient-button-disabled disabled:text-disabled disabled:opacity-50"
                 onClick={handleUploadSubmit}
               >
                 Upload

src/components/image-modify-form.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useForm, Controller } from "react-hook-form";
+import { X } from "lucide-react";
 
 export interface ImageModificationData {
   title: string;
@@ -24,13 +25,15 @@ interface ImageModifyFormProps {
     data: ImageModificationData,
     clonedImageData: { name: string; size: number; type: string; url: string },
   ) => void;
+  onRemove: (index: number) => void;
   onChange: (data: ImageModificationData) => void;
 }
 
 const ImageModifyForm = ({
   imageData,
   index,
   onClone,
+  onRemove,
   onChange,
 }: ImageModifyFormProps) => {
   const { control, watch, setValue } = useForm<ImageModificationData>({
@@ -113,9 +116,13 @@ const ImageModifyForm = ({
     );
   };
 
+  const handleRemove = (index: number) => {
+    onRemove(index);
+  };
+
   return (
     <div className="h-[470px] w-[700px] rounded border border-primary bg-primary p-6 text-primary">
-      <div className="flex h-full space-x-6">
+      <div className="flex h-full justify-between">
         <div className="flex w-[300px] flex-shrink-0 rounded-lg bg-secondary p-5">
           {imageData.url && (
             <img
@@ -126,27 +133,32 @@ const ImageModifyForm = ({
           )}
         </div>
 
-        <div>
-          <div className="col-span-2 mb-4 flex items-center justify-between">
+        <div className="w-[330px]">
+          <div className="mb-4 flex items-center justify-between">
             <Controller
               name="title"
               control={control}
               render={({ field }) => (
                 <input
                   type="text"
                   {...field}
-                  className="bg-input w-full rounded border border-primary p-2 text-primary"
+                  className="w-[180px] rounded border border-primary bg-input p-2 text-primary"
                 />
               )}
             />
             <button
               onClick={handleClone}
-              className="bg-button-secondary ml-4 w-[100px] rounded p-2 font-bold text-primary transition hover:bg-opacity-85"
+              className="w-[80px] rounded bg-button-secondary p-2 font-bold text-primary transition"
             >
               Clone
             </button>
+            <button
+              onClick={() => handleRemove(index)}
+              className="flex h-[40px] w-[40px] items-center justify-center rounded bg-button-destroy"
+            >
+              <X size={24} className="cursor-pointer" />
+            </button>
           </div>
-
           <div>
             <Controller
               name="raw"
@@ -180,7 +192,7 @@ const ImageModifyForm = ({
                       type="number"
                       {...field}
                       placeholder="Will be automatically calculated"
-                      className="bg-input disabled:bg-gradient-button-disabled disabled:text-disabled mt-2 w-full rounded border border-primary p-2 text-primary disabled:opacity-50"
+                      className="mt-2 w-full rounded border border-primary bg-input p-2 text-primary disabled:bg-gradient-button-disabled disabled:text-disabled disabled:opacity-50"
                       disabled={watch("raw")}
                       value={field.value ?? ""}
                     />
@@ -202,7 +214,7 @@ const ImageModifyForm = ({
                       type="number"
                       {...field}
                       placeholder="Will be automatically calculated"
-                      className="bg-input disabled:bg-gradient-button-disabled disabled:text-disabled mt-2 w-full rounded border border-primary p-2 text-primary disabled:opacity-50"
+                      className="mt-2 w-full rounded border border-primary bg-input p-2 text-primary disabled:bg-gradient-button-disabled disabled:text-disabled disabled:opacity-50"
                       disabled={watch("raw")}
                       value={field.value ?? ""}
                     />
@@ -228,7 +240,7 @@ const ImageModifyForm = ({
                       min="1"
                       max="100"
                       {...field}
-                      className="bg-input disabled:bg-gradient-button-disabled disabled:text-disabled mt-2 w-full rounded border border-primary text-primary disabled:opacity-50"
+                      className="mt-2 w-full rounded border border-primary bg-input text-primary disabled:bg-gradient-button-disabled disabled:text-disabled disabled:opacity-50"
                       disabled={watch("raw")}
                     />
                   )}
@@ -245,7 +257,7 @@ const ImageModifyForm = ({
                   render={({ field }) => (
                     <select
                       {...field}
-                      className="bg-input disabled:bg-gradient-button-disabled disabled:text-disabled mt-2 w-full rounded border border-primary p-2 text-primary disabled:opacity-50"
+                      className="mt-2 w-full rounded border border-primary bg-input p-2 text-primary disabled:bg-gradient-button-disabled disabled:text-disabled disabled:opacity-50"
                       disabled={watch("raw")}
                     >
                       {Object.entries(formats).map(([key, value]) => (