From 8a698e79a5be573eb44ccbfaf3824c951b03bbf9 Mon Sep 17 00:00:00 2001
From: peckz <pekiseven@gmail.com>
Date: Fri, 25 Apr 2025 09:50:36 +0200
Subject: [PATCH] feat: allow CSV file upload

---
 pages/utilities/csv-to-json.tsx | 134 +++++++++++++++++++++++++++++---
 1 file changed, 124 insertions(+), 10 deletions(-)

diff --git a/pages/utilities/csv-to-json.tsx b/pages/utilities/csv-to-json.tsx
index db91927..b155460 100644
--- a/pages/utilities/csv-to-json.tsx
+++ b/pages/utilities/csv-to-json.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useState, useRef } from "react";
 import { Textarea } from "@/components/ds/TextareaComponent";
 import PageHeader from "@/components/PageHeader";
 import { Card } from "@/components/ds/CardComponent";
@@ -12,12 +12,16 @@ import CallToActionGrid from "@/components/CallToActionGrid";
 import CsvToJsonSEO from "@/components/seo/CsvToJsonSEO";
 import Meta from "@/components/Meta";
 import { convertCSVtoJSON } from "@/components/utils/csv-to-json.utils";
+import { cn } from "@/lib/utils";
+import { UploadIcon } from "lucide-react";
 
 export default function CSVtoJSON() {
   const [input, setInput] = useState("");
   const [output, setOutput] = useState("");
   const { buttonText, handleCopy } = useCopyToClipboard();
   const [lowercase, setLowercase] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -59,11 +63,82 @@ export default function CSVtoJSON() {
     });
   }, [input]);
 
+  const processFile = useCallback(
+    (file: File) => {
+      if (!file.type.startsWith("text/") && !file.name.endsWith(".csv")) {
+        setOutput("Please upload a CSV file");
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const content = e.target?.result as string;
+        setInput(content);
+
+        try {
+          const json = convertCSVtoJSON(content, lowercase);
+          setOutput(json);
+        } catch (errorMessage: unknown) {
+          setOutput(errorMessage as string);
+        }
+      };
+      reader.readAsText(file);
+    },
+    [lowercase]
+  );
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+  }, []);
+
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+      const file = e.clipboardData.files?.[0];
+      if (file) {
+        processFile(file);
+      }
+    },
+    [processFile]
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      setIsDragging(false);
+
+      const file = e.dataTransfer.files?.[0];
+      if (file) {
+        processFile(file);
+      }
+    },
+    [processFile]
+  );
+
+  const handleFileInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) {
+        processFile(file);
+      }
+    },
+    [processFile]
+  );
+
+  const triggerFileInput = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
   return (
     <main>
       <Meta
         title="CSV to JSON Converter | Free, Open Source & Ad-free"
-        description="Convert CSV files to JSON format quickly and easily with Jam's free online CSV to JSON converter. Just paste your CSV file and get the JSON result. That's it."
+        description="Convert CSV files to JSON format quickly and easily with Jam's free online CSV to JSON converter. Upload your CSV file or paste its content and get the JSON result. That's it."
       />
       <Header />
       <CMDK />
@@ -78,14 +153,53 @@ export default function CSVtoJSON() {
       <section className="container max-w-2xl mb-6">
         <Card className="flex flex-col p-6 hover:shadow-none shadow-none rounded-xl">
           <div>
-            <Label>CSV</Label>
-            <Textarea
-              rows={6}
-              placeholder="Paste CSV here"
-              onChange={handleChange}
-              className="mb-6"
-              value={input}
-            />
+            <div className="flex justify-between items-center mb-2">
+              <Label className="mb-0">CSV</Label>
+              <Button
+                variant="outline"
+                onClick={triggerFileInput}
+                type="button"
+                size="sm"
+                className="gap-2"
+              >
+                <UploadIcon className="w-[16px]" /> Upload CSV
+              </Button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".csv"
+                onChange={handleFileInputChange}
+                className="hidden"
+              />
+            </div>
+
+            <div
+              className="relative"
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+            >
+              <Textarea
+                rows={6}
+                placeholder="Paste or drag and drop a CSV file"
+                onInput={handleChange}
+                onPaste={handlePaste}
+                className={cn("mb-6", {
+                  "border-dashed": isDragging,
+                  "bg-white": isDragging,
+                  "border-gray-300": isDragging,
+                })}
+                value={input}
+              />
+
+              {isDragging && (
+                <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                  <p className="text-sm bg-white p-2 rounded-md shadow">
+                    Drop it like it's hot 🔥
+                  </p>
+                </div>
+              )}
+            </div>
 
             <div className="flex justify-between items-center mb-2">
               <Label className="mb-0">JSON</Label>