Fix Upload Validation Issue (#1)

components/ui/image-upload.tsx

@@ -1,63 +1,77 @@
-"use client"
+"use client";
 
-import Image from "next/image"
-import { useEffect, useState } from "react"
-import { ImagePlus, Trash } from "lucide-react"
-import { CldUploadWidget } from "next-cloudinary"
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { ImagePlus, Trash } from "lucide-react";
+import { CldUploadWidget } from "next-cloudinary";
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 
 interface ImageUploadProps {
-  disabled?: boolean
-  onChange: (value: string) => void
-  onRemove: (value: string) => void
-  value: string[]
+  disabled?: boolean;
+  onChange: (value: string) => void;
+  onRemove: (value: string) => void;
+  value: string[];
 }
 
 const ImageUpload: React.FC<ImageUploadProps> = ({
   disabled,
   onChange,
   onRemove,
-  value
+  value,
 }) => {
-  const [isMounted, setIsMounted] = useState(false)
+  const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
-    setIsMounted(true)
-  }, [])
+    setIsMounted(true);
+  }, []);
 
   const onUpload = (result: any) => {
-    onChange(result.info.secure_url)
-  }
+    // Validate file type (allow only 'jpg', 'png', and 'jpeg')
+    const allowedFileTypes = ["jpg", "png", "jpeg"];
+    const fileType = result.info.format.toLowerCase();
+
+    if (allowedFileTypes.includes(fileType)) {
+      onChange(result.info.secure_url);
+    } else {
+      // Handle invalid file type (e.g., show a message)
+      console.error(
+        "Invalid file type. Please upload a JPG, PNG, or JPEG file."
+      );
+    }
+  };
 
   if (!isMounted) {
-    return null
+    return null;
   }
-  
+
   return (
     <div>
       <div className="mb-4 flex items-center gap-4">
         {value.map((url) => (
-          <div key={url} className="relative w-[200px] h-[200px] rounded-md overflow-hidden">
+          <div
+            key={url}
+            className="relative w-[200px] h-[200px] rounded-md overflow-hidden"
+          >
             <div className="z-10 absolute top-2 right-2">
-              <Button type="button" onClick={() => onRemove(url)} variant="destructive" size="icon">
+              <Button
+                type="button"
+                onClick={() => onRemove(url)}
+                variant="destructive"
+                size="icon"
+              >
                 <Trash className="h-4 w-4" />
               </Button>
             </div>
-            <Image
-              fill
-              className="object-cover"
-              alt="Image"
-              src={url}
-            />
+            <Image fill className="object-cover" alt="Image" src={url} />
           </div>
         ))}
       </div>
       <CldUploadWidget onUpload={onUpload} uploadPreset="rk1jy06y">
         {({ open }) => {
           const onClick = () => {
-            open()
-          }
+            open();
+          };
 
           return (
             <Button
@@ -69,11 +83,11 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
               <ImagePlus className="h-4 w-4 mr-2" />
               Upload an Image
             </Button>
-          )
+          );
         }}
       </CldUploadWidget>
     </div>
-  )
-}
+  );
+};
 
-export default ImageUpload
+export default ImageUpload;