feat: Adds simple file validation

package.json

@@ -19,7 +19,8 @@
     "next": "15.0.0-rc.1",
     "next-plausible": "^3.12.2",
     "react": "19.0.0-rc-cd22717c-20241013",
-    "react-dom": "19.0.0-rc-cd22717c-20241013"
+    "react-dom": "19.0.0-rc-cd22717c-20241013",
+    "sonner": "^1.7.0"
   },
   "devDependencies": {
     "@types/eslint": "^8.56.10",
@@ -31,9 +32,9 @@
     "concurrently": "^9.1.0",
     "eslint": "^8",
     "eslint-config-next": "15.0.0-rc.1",
+    "postcss": "^8",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
-    "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   },
@@ -42,5 +43,6 @@
       "@types/react": "npm:[email protected]",
       "@types/react-dom": "npm:[email protected]"
     }
-  }
-}
+  },
+  "packageManager": "[email protected]"
+}

src/app/(tools)/rounded-border/rounded-tool.tsx

@@ -1,9 +1,10 @@
 "use client";
+
+import { useLocalStorage } from "@/hooks/use-local-storage";
 import { usePlausible } from "next-plausible";
-import { useMemo, useState } from "react";
 import type { ChangeEvent } from "react";
-import { useLocalStorage } from "@/hooks/use-local-storage";
-import React from "react";
+import React, { useMemo, useState } from "react";
+import { toast } from "sonner";
 
 type Radius = 2 | 4 | 8 | 16 | 32 | 64;
 
@@ -80,23 +81,39 @@ export const useFileUploader = () => {
 
   const handleFileUpload = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const content = e.target?.result as string;
-        const img = new Image();
-        img.onload = () => {
-          setImageMetadata({
-            width: img.width,
-            height: img.height,
-            name: file.name,
-          });
-          setImageContent(content);
-        };
-        img.src = content;
-      };
-      reader.readAsDataURL(file);
+
+    if (!file) {
+      toast.error("Error loading file!", {
+        description:
+          "Please try uploading the file again or pick a different one.",
+      });
+
+      return;
     }
+
+    if (!file.type.startsWith("image/")) {
+      toast.error("Error uploading file!", {
+        description: "Only Images are supported.",
+      });
+
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const content = e.target?.result as string;
+      const img = new Image();
+      img.onload = () => {
+        setImageMetadata({
+          width: img.width,
+          height: img.height,
+          name: file.name,
+        });
+        setImageContent(content);
+      };
+      img.src = content;
+    };
+    reader.readAsDataURL(file);
   };
 
   const cancel = () => {

src/app/(tools)/square-image/square-tool.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import React, { useState, useEffect, type ChangeEvent } from "react";
-import { usePlausible } from "next-plausible";
 import { useLocalStorage } from "@/hooks/use-local-storage";
+import { usePlausible } from "next-plausible";
+import React, { useEffect, useState, type ChangeEvent } from "react";
+import { toast } from "sonner";
 
 export const SquareTool: React.FC = () => {
   const [imageFile, setImageFile] = useState<File | null>(null);
@@ -21,10 +22,26 @@ export const SquareTool: React.FC = () => {
 
   const handleImageUpload = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
-    if (file) {
-      setImageFile(file);
-      setImageMetadata({ width: 0, height: 0, name: file.name });
+
+    if (!file) {
+      toast.error("Error loading file!", {
+        description:
+          "Please try uploading the file again or pick a different one.",
+      });
+
+      return;
     }
+
+    if (!file.type.startsWith("image/")) {
+      toast.error("Error uploading file!", {
+        description: "Only Images are supported.",
+      });
+
+      return;
+    }
+
+    setImageFile(file);
+    setImageMetadata({ width: 0, height: 0, name: file.name });
   };
 
   const handleBackgroundColorChange = (

src/app/(tools)/svg-to-png/svg-tool.tsx

@@ -1,9 +1,9 @@
 "use client";
-import { usePlausible } from "next-plausible";
-import { useMemo, useState } from "react";
-import { useLocalStorage } from "@/hooks/use-local-storage";
 
-import { type ChangeEvent } from "react";
+import { useLocalStorage } from "@/hooks/use-local-storage";
+import { usePlausible } from "next-plausible";
+import React, { useMemo, useState, type ChangeEvent } from "react";
+import { toast } from "sonner";
 
 type Scale = 1 | 2 | 4 | 8 | 16 | 32 | 64;
 
@@ -85,23 +85,39 @@ export const useFileUploader = () => {
 
   const handleFileUpload = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const content = e.target?.result as string;
-
-        // Extract width and height from SVG content
-        const parser = new DOMParser();
-        const svgDoc = parser.parseFromString(content, "image/svg+xml");
-        const svgElement = svgDoc.documentElement;
-        const width = parseInt(svgElement.getAttribute("width") ?? "300");
-        const height = parseInt(svgElement.getAttribute("height") ?? "150");
-
-        setSvgContent(content);
-        setImageMetadata({ width, height, name: file.name });
-      };
-      reader.readAsText(file);
+
+    if (!file) {
+      toast.error("Error loading file!", {
+        description:
+          "Please try uploading the file again or pick a different one.",
+      });
+
+      return;
+    }
+
+    if (file.type !== "image/svg+xml") {
+      toast.error("Error uploading file!", {
+        description: "Only SVGs are supported.",
+      });
+
+      return;
     }
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const content = e.target?.result as string;
+
+      // Extract width and height from SVG content
+      const parser = new DOMParser();
+      const svgDoc = parser.parseFromString(content, "image/svg+xml");
+      const svgElement = svgDoc.documentElement;
+      const width = parseInt(svgElement.getAttribute("width") ?? "300");
+      const height = parseInt(svgElement.getAttribute("height") ?? "150");
+
+      setSvgContent(content);
+      setImageMetadata({ width, height, name: file.name });
+    };
+    reader.readAsText(file);
   };
 
   const cancel = () => {
@@ -112,8 +128,6 @@ export const useFileUploader = () => {
   return { svgContent, imageMetadata, handleFileUpload, cancel };
 };
 
-import React from "react";
-
 interface SVGRendererProps {
   svgContent: string;
 }
@@ -190,7 +204,7 @@ export function SVGTool() {
             <input
               type="file"
               onChange={handleFileUpload}
-              accept=".svg"
+              accept="image/svg+xml"
               className="hidden"
             />
           </label>

src/app/layout.tsx

@@ -1,7 +1,8 @@
 import type { Metadata } from "next";
+import PlausibleProvider from "next-plausible";
 import localFont from "next/font/local";
+import { Toaster } from "sonner";
 import "./globals.css";
-import PlausibleProvider from "next-plausible";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -36,6 +37,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
+        <Toaster richColors closeButton theme="dark" />
       </body>
     </html>
   );