Merge pull request abue-ammar#10 from abue-ammar/ui-migration

feat: add file type validation and error handling in image compressor…

Author: abue-ammar

package-lock.json

@@ -18,9 +18,11 @@
     "compressorjs": "^1.2.1",
     "jszip": "^3.10.1",
     "lucide-react": "^0.525.0",
+    "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-photo-view": "^1.2.4",
+    "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {

package.json

@@ -2,6 +2,7 @@ import Footer from "./components/footer";
 import Header from "./components/header";
 import ImageCompressor from "./components/image-compressor";
 import { ThemeProvider } from "./components/theme-provider";
+import { Toaster } from "./components/ui/sonner";
 
 function App() {
   return (
@@ -10,6 +11,7 @@ function App() {
         <Header />
         <main className="flex-1">
           <ImageCompressor />
+          <Toaster />
         </main>
         <Footer />
       </div>

src/App.tsx

@@ -3,6 +3,7 @@ import JSZip from "jszip";
 import { Download, ImageIcon, Inbox, RefreshCcw } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { PhotoProvider } from "react-photo-view";
+import { toast } from "sonner";
 
 import ImagePreviewCard from "./image-preview-card";
 import ImageQualitySlider from "./image-quality-slider";
@@ -31,6 +32,45 @@ const ImageCompressor = () => {
   const [compressProgress, setCompressProgress] = useState<number>(0);
   const dropAreaRef = useRef<HTMLLabelElement>(null);
   const compressedImagesRef = useRef<HTMLDivElement>(null);
+
+  // Allowed image formats
+  const allowedFormats = ["image/jpeg", "image/jpg", "image/png", "image/webp"];
+
+  // Validate file type
+  const validateFileType = (file: File): boolean => {
+    return allowedFormats.includes(file.type.toLowerCase());
+  };
+
+  // Filter valid files and show error for invalid ones
+  const filterValidFiles = (files: FileList | File[]): File[] => {
+    const filesArray = Array.from(files);
+    const validFiles: File[] = [];
+    const invalidFiles: File[] = [];
+
+    filesArray.forEach((file) => {
+      if (validateFileType(file)) {
+        validFiles.push(file);
+      } else {
+        invalidFiles.push(file);
+      }
+    });
+
+    // Show error toast for invalid files
+    if (invalidFiles.length > 0) {
+      const invalidFileNames = invalidFiles.map((file) => file.name).join(", ");
+      toast.error(
+        `Invalid file! Please upload only JPG, JPEG, PNG, or WEBP files.`,
+        {
+          description: invalidFileNames,
+          duration: 5000,
+          position: "top-right",
+        }
+      );
+    }
+
+    return validFiles;
+  };
+
   const onImageQualityChange = async (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -40,9 +80,13 @@ const ImageCompressor = () => {
   const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     e.preventDefault();
     if (e.target.files) {
+      const validFiles = filterValidFiles(e.target.files);
+      if (validFiles.length === 0) {
+        return; // No valid files to process
+      }
       setCompressedImages([]);
       setCompressProgress(0);
-      setFilelist(e.target.files);
+      setFilelist(validFiles);
     }
   };
 
@@ -144,9 +188,15 @@ const ImageCompressor = () => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragActive(false);
+
+    const validFiles = filterValidFiles(e.dataTransfer.files);
+    if (validFiles.length === 0) {
+      return; // No valid files to process
+    }
+
     setCompressedImages([]);
     setCompressProgress(0);
-    setFilelist(e.dataTransfer.files);
+    setFilelist(validFiles);
   };
 
   const handleDownload = () => {
@@ -212,7 +262,7 @@ const ImageCompressor = () => {
           <input
             multiple
             type="file"
-            accept="image/*"
+            accept="image/jpeg,image/jpg,image/png,image/webp"
             onChange={handleImageUpload}
             style={{ display: "none" }}
             id="file-input"

src/components/image-compressor.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }