Feat: drag and drop

package.json

@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "babel-plugin-react-compiler": "0.0.0-experimental-734b737-20241003",
+    "lucide-react": "^0.456.0",
     "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",
+    "react-dropzone": "^14.3.5"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/(tools)/components/dropzone-upload.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useDropzone } from "react-dropzone";
+import { Upload } from "lucide-react";
+
+interface DropzoneUploadProps {
+  accept: Record<string, string[]>;
+  onFilesAdded: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function DropzoneUpload({
+  accept,
+  onFilesAdded,
+}: DropzoneUploadProps) {
+  const onDrop = (acceptedFiles: File[]) => {
+    if (acceptedFiles.length > 0) {
+      onFilesAdded({
+        target: {
+          files: acceptedFiles,
+        } as unknown as EventTarget,
+      } as unknown as React.ChangeEvent<HTMLInputElement>);
+    }
+  };
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept,
+    onDrop,
+  });
+
+  return (
+    <div className="w-full max-w-md mx-auto">
+      <div
+        {...getRootProps()}
+        className={`relative border-2 border-dashed rounded-lg p-6 cursor-pointer ${
+          isDragActive
+            ? "border-green-500 text-green-500"
+            : "border-muted-foreground"
+        }`}
+      >
+        <input {...getInputProps()} onChange={onFilesAdded} />
+        <div className="text-center">
+          <Upload className="mx-auto size-8 text-muted-foreground" />
+          <p className="mt-6 text-sm text-muted-foreground">
+            Drag &apos;n&apos; drop files here, or click to select files
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {Object.keys(accept).length > 0
+              ? `Allowed files: ${Object.keys(accept).join(", ")}`
+              : "All file types are allowed"}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -3,6 +3,7 @@ import { usePlausible } from "next-plausible";
 import { useMemo, useState } from "react";
 import { ChangeEvent } from "react";
 import React from "react";
+import DropzoneUpload from "../components/dropzone-upload";
 
 type Radius = 2 | 4 | 8 | 16 | 32 | 64;
 
@@ -196,15 +197,12 @@ export function RoundedTool() {
       <div className="flex flex-col p-4 gap-4">
         <p className="text-center">Round the corners of any image</p>
         <div className="flex justify-center">
-          <label className="cursor-pointer inline-flex items-center px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-colors duration-200 gap-2">
-            <span>Upload Image</span>
-            <input
-              type="file"
-              onChange={handleFileUpload}
-              accept="image/*"
-              className="hidden"
-            />
-          </label>
+          <DropzoneUpload
+            accept={{
+              "image/*": [],
+            }}
+            onFilesAdded={handleFileUpload}
+          />
         </div>
       </div>
     );

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

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect, ChangeEvent } from "react";
 import { usePlausible } from "next-plausible";
+import DropzoneUpload from "../components/dropzone-upload";
 
 export const SquareTool: React.FC = () => {
   const [imageFile, setImageFile] = useState<File | null>(null);
@@ -115,15 +116,12 @@ export const SquareTool: React.FC = () => {
           Create square images with custom backgrounds. Fast and free.
         </p>
         <div className="flex justify-center">
-          <label className="cursor-pointer inline-flex items-center px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-colors duration-200 gap-2">
-            <span>Upload Image</span>
-            <input
-              type="file"
-              onChange={handleImageUpload}
-              accept="image/*"
-              className="hidden"
-            />
-          </label>
+          <DropzoneUpload
+            accept={{
+              "image/*": [],
+            }}
+            onFilesAdded={handleImageUpload}
+          />
         </div>
       </div>
     );

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

@@ -52,7 +52,9 @@ function useSvgConverter(props: {
         const svgFileName = props.imageMetadata.name ?? "svg_converted";
 
         // Remove the .svg extension
-        link.download = `${svgFileName.replace(".svg", "")}-${props.scale}x.png`;
+        link.download = `${svgFileName.replace(".svg", "")}-${
+          props.scale
+        }x.png`;
         link.click();
       }
     };
@@ -64,7 +66,9 @@ function useSvgConverter(props: {
       saveImage();
     };
 
-    img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(scaledSvg)}`;
+    img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+      scaledSvg
+    )}`;
   };
 
   return {
@@ -112,6 +116,7 @@ export const useFileUploader = () => {
 };
 
 import React from "react";
+import DropzoneUpload from "../components/dropzone-upload";
 
 interface SVGRendererProps {
   svgContent: string;
@@ -184,15 +189,10 @@ export function SVGTool() {
           Make SVGs into PNGs. Also makes them bigger. (100% free btw.)
         </p>
         <div className="flex justify-center">
-          <label className="cursor-pointer inline-flex items-center px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-colors duration-200 gap-2">
-            <span>Upload SVG</span>
-            <input
-              type="file"
-              onChange={handleFileUpload}
-              accept=".svg"
-              className="hidden"
-            />
-          </label>
+          <DropzoneUpload
+            accept={{ "image/svg+xml": [] }}
+            onFilesAdded={handleFileUpload}
+          />
         </div>
       </div>
     );