From cc667a338a95eb0e3479ead86d357e622e919525 Mon Sep 17 00:00:00 2001
From: Fidel Soto <fidelsotostem@gmail.com>
Date: Wed, 13 Nov 2024 16:42:13 -0700
Subject: [PATCH] added file type check when pasting an image

---
 src/app/(tools)/rounded-border/rounded-tool.tsx | 12 ++++++++++--
 src/app/(tools)/square-image/square-tool.tsx    | 12 ++++++++++--
 src/app/(tools)/svg-to-png/svg-tool.tsx         |  6 ++++--
 src/hooks/use-file-uploader.ts                  |  7 +++++--
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/app/(tools)/rounded-border/rounded-tool.tsx b/src/app/(tools)/rounded-border/rounded-tool.tsx
index a5dbf34..67c20c9 100644
--- a/src/app/(tools)/rounded-border/rounded-tool.tsx
+++ b/src/app/(tools)/rounded-border/rounded-tool.tsx
@@ -240,12 +240,20 @@ function RoundedToolCore(props: { fileUploaderProps: FileUploaderResult }) {
 }
 
 export function RoundedTool() {
-  const fileUploaderProps = useFileUploader();
+  const acceptedFileTypes = [
+    "image/*",
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".webp",
+    ".svg",
+  ];
+  const fileUploaderProps = useFileUploader(acceptedFileTypes);
 
   return (
     <FileDropzone
       setCurrentFile={fileUploaderProps.handleFileUpload}
-      acceptedFileTypes={["image/*", ".jpg", ".jpeg", ".png", ".webp", ".svg"]}
+      acceptedFileTypes={acceptedFileTypes}
       dropText="Drop image file"
     >
       <RoundedToolCore fileUploaderProps={fileUploaderProps} />
diff --git a/src/app/(tools)/square-image/square-tool.tsx b/src/app/(tools)/square-image/square-tool.tsx
index 8264309..38dbf81 100644
--- a/src/app/(tools)/square-image/square-tool.tsx
+++ b/src/app/(tools)/square-image/square-tool.tsx
@@ -138,12 +138,20 @@ function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
 }
 
 export function SquareTool() {
-  const fileUploaderProps = useFileUploader();
+  const acceptedFileTypes = [
+    "image/*",
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".webp",
+    ".svg",
+  ];
+  const fileUploaderProps = useFileUploader(acceptedFileTypes);
 
   return (
     <FileDropzone
       setCurrentFile={fileUploaderProps.handleFileUpload}
-      acceptedFileTypes={["image/*", ".jpg", ".jpeg", ".png", ".webp", ".svg"]}
+      acceptedFileTypes={acceptedFileTypes}
       dropText="Drop image file"
     >
       <SquareToolCore fileUploaderProps={fileUploaderProps} />
diff --git a/src/app/(tools)/svg-to-png/svg-tool.tsx b/src/app/(tools)/svg-to-png/svg-tool.tsx
index 137d778..b34313b 100644
--- a/src/app/(tools)/svg-to-png/svg-tool.tsx
+++ b/src/app/(tools)/svg-to-png/svg-tool.tsx
@@ -155,6 +155,7 @@ function SVGToolCore(props: { fileUploaderProps: FileUploaderResult }) {
       <UploadBox
         title="Make SVGs into PNGs. Also makes them bigger. (100% free btw.)"
         description="Upload SVG"
+        subtitle="Allows pasting images from clipboard"
         accept=".svg"
         onChange={handleFileUploadEvent}
       />
@@ -217,11 +218,12 @@ function SVGToolCore(props: { fileUploaderProps: FileUploaderResult }) {
 }
 
 export function SVGTool() {
-  const fileUploaderProps = useFileUploader();
+  const acceptedFileTypes = ["image/svg+xml", ".svg"];
+  const fileUploaderProps = useFileUploader(acceptedFileTypes);
   return (
     <FileDropzone
       setCurrentFile={fileUploaderProps.handleFileUpload}
-      acceptedFileTypes={["image/svg+xml", ".svg"]}
+      acceptedFileTypes={acceptedFileTypes}
       dropText="Drop SVG file"
     >
       <SVGToolCore fileUploaderProps={fileUploaderProps} />
diff --git a/src/hooks/use-file-uploader.ts b/src/hooks/use-file-uploader.ts
index 74e2372..5f844f3 100644
--- a/src/hooks/use-file-uploader.ts
+++ b/src/hooks/use-file-uploader.ts
@@ -66,6 +66,7 @@ export type FileUploaderResult = {
 
 /**
  * A hook for handling file uploads, particularly images and SVGs
+ * @param acceptedFileTypes {string[]} an array of accepted file types.
  * @returns {FileUploaderResult} An object containing:
  * - imageContent: Use this as the src for an img tag
  * - rawContent: The raw file content as a string (useful for SVG tags)
@@ -73,7 +74,9 @@ export type FileUploaderResult = {
  * - handleFileUpload: Function to handle file input change events
  * - cancel: Function to reset the upload state
  */
-export const useFileUploader = (): FileUploaderResult => {
+export const useFileUploader = (
+  acceptedFileTypes: string[],
+): FileUploaderResult => {
   const [imageContent, setImageContent] = useState<string>("");
   const [rawContent, setRawContent] = useState<string>("");
   const [imageMetadata, setImageMetadata] = useState<{
@@ -125,7 +128,7 @@ export const useFileUploader = (): FileUploaderResult => {
 
   useClipboardPaste({
     onPaste: handleFilePaste,
-    acceptedFileTypes: ["image/*", ".jpg", ".jpeg", ".png", ".webp", ".svg"],
+    acceptedFileTypes,
   });
 
   const cancel = () => {