Added file type check when pasting an image. Also added subtitle to svg tool file dropzone.

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} />

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} />

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} />

src/hooks/use-file-uploader.ts

@@ -66,14 +66,17 @@ 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)
  * - imageMetadata: Width, height, and name of the image
  * - 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 = () => {