From 06d6954d31ff3edc5aa2124850de641080f36e8d Mon Sep 17 00:00:00 2001
From: Roman <me@rman.dev>
Date: Thu, 30 Oct 2025 13:48:00 +0000
Subject: [PATCH 1/2] allow pasting images from clipboard

Closes #120
---
 pages/utilities/image-to-base64.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/pages/utilities/image-to-base64.tsx b/pages/utilities/image-to-base64.tsx
index 12f25f1..dd655c6 100644
--- a/pages/utilities/image-to-base64.tsx
+++ b/pages/utilities/image-to-base64.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Textarea } from "@/components/ds/TextareaComponent";
 import PageHeader from "@/components/PageHeader";
 import { Card } from "@/components/ds/CardComponent";
@@ -33,6 +33,27 @@ export default function ImageToBase64() {
     reader.readAsDataURL(file);
   }, []);
 
+  useEffect(() => {
+    const handlePaste = (e: ClipboardEvent) => {
+      const items = e.clipboardData?.items;
+      if (items) {
+        for (let item of Array.from(items)) {
+          if (item.type.startsWith("image/")) {
+            const file = item.getAsFile();
+            if (file) {
+              handleFileSelect(file);
+              e.preventDefault();
+              return;
+            }
+          }
+        }
+      }
+    };
+
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, [handleFileSelect]);
+
   return (
     <main>
       <Meta

From 6b6ced535227a4481694c871029ae15a23accec3 Mon Sep 17 00:00:00 2001
From: Petar Cirkovic <pekiseven@gmail.com>
Date: Thu, 6 Nov 2025 14:08:30 +0100
Subject: [PATCH 2/2] chore: add a label to describe paste ability

---
 pages/utilities/image-to-base64.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pages/utilities/image-to-base64.tsx b/pages/utilities/image-to-base64.tsx
index dd655c6..3a3273a 100644
--- a/pages/utilities/image-to-base64.tsx
+++ b/pages/utilities/image-to-base64.tsx
@@ -37,7 +37,7 @@ export default function ImageToBase64() {
     const handlePaste = (e: ClipboardEvent) => {
       const items = e.clipboardData?.items;
       if (items) {
-        for (let item of Array.from(items)) {
+        for (const item of Array.from(items)) {
           if (item.type.startsWith("image/")) {
             const file = item.getAsFile();
             if (file) {
@@ -72,6 +72,7 @@ export default function ImageToBase64() {
 
       <section className="container max-w-2xl mb-6">
         <Card className="flex flex-col p-6 hover:shadow-none shadow-none rounded-xl">
+          <Label>Paste from clipboard or drag n drop</Label>
           <ImageUploadComponent onFileSelect={handleFileSelect} />
           <div className="pt-8">
             <Label>Base64 Output</Label>