feat: add clipboard paste functionality and customizable paste button to file upload component

Author: aeltorio

client/eslint.config.js

@@ -34,6 +34,9 @@ export default [
         File: 'readonly',
         FileReader: 'readonly',
         Image: 'readonly',
+        ClipboardItem: 'readonly',
+        ClipboardEvent: 'readonly',
+        navigator: 'readonly',
       },
       parserOptions: {
         ecmaFeatures: {

client/src/components/file-upload/file-upload-item.tsx

@@ -23,7 +23,7 @@
  */
 import { Button } from "@heroui/button";
 import { HTMLHeroUIProps } from "@heroui/system";
-import { CloseIcon } from "@heroui/shared-icons";
+import { DeleteIcon } from "@heroui/shared-icons";
 import { FC } from "react";
 
 export interface FileUploadItemProps extends HTMLHeroUIProps<"div"> {
@@ -55,7 +55,7 @@ const FileUploadItem: FC<FileUploadItemProps> = ({
         role="listitem"
         onPress={() => onFileRemove(file)}
       >
-        <CloseIcon />
+        <DeleteIcon />
       </Button>
       <span>{file.name}</span>
       <span>{formatFileSize(file.size)}</span>

client/src/components/file-upload/file-upload-theme.ts

@@ -44,7 +44,7 @@ const fileUpload = tv({
       "overflow-y-auto",
       "subpixel-antialiased",
     ],
-    item: ["flex", "gap-4", "my-4"],
+    item: ["flex", "gap-2", "my-2"],
     buttons: [
       "flex",
       "gap-3",

client/src/components/file-upload/file-upload.tsx

@@ -33,6 +33,9 @@ import {
   useState,
 } from "react";
 import { clsx } from "@heroui/shared-utils";
+import { useTranslation } from "react-i18next";
+
+import { PasteIcon } from "../icons";
 
 import { UseFileUploadProps, useFileUpload } from "./use-file-upload";
 import FileUploadItem from "./file-upload-item";
@@ -61,6 +64,9 @@ const FileUpload = forwardRef<"div", FileUploadProps>((props, ref) => {
     fileItemElement,
     topbar,
     onChange,
+    showPasteButton = false,
+    pasteButtonText = "Paste",
+    pasteButton,
     ...otherProps
   } = useFileUpload({ ...props, ref });
 
@@ -69,6 +75,8 @@ const FileUpload = forwardRef<"div", FileUploadProps>((props, ref) => {
   const [files, setFiles] = useState<File[]>(initialFiles ?? []);
   const [isDragging, setIsDragging] = useState(false);
 
+  const { t } = useTranslation();
+
   useEffect(() => {
     initialFiles && setFiles(initialFiles);
   }, [initialFiles]);
@@ -177,6 +185,7 @@ const FileUpload = forwardRef<"div", FileUploadProps>((props, ref) => {
         const acceptableFiles = filterAcceptableFiles(droppedFiles);
 
         if (acceptableFiles.length === 0) {
+          // eslint-disable-next-line no-console
           console.warn("No acceptable file types were dropped");
 
           return;
@@ -194,6 +203,176 @@ const FileUpload = forwardRef<"div", FileUploadProps>((props, ref) => {
     [props.isDisabled, multiple, files, filterAcceptableFiles, updateFiles],
   );
 
+  // Add new state to track paste errors
+  const [pasteError, setPasteError] = useState<string | null>(null);
+
+  // Function to convert clipboard items to files
+  const clipboardItemToFile = useCallback(
+    async (item: ClipboardItem): Promise<File | null> => {
+      // Get all types from the clipboard item
+      const types = item.types;
+
+      // If accept prop exists, check if the item type is acceptable
+      if (accept) {
+        const acceptableTypes = accept.split(",").map((type) => type.trim());
+
+        // Find a matching type
+        const matchingType = types.find((type) => {
+          // Check for direct match
+          if (acceptableTypes.includes(type)) return true;
+
+          // Check for wildcard matches (e.g., "image/*")
+          return acceptableTypes.some((acceptType) => {
+            if (acceptType.endsWith("/*")) {
+              const category = acceptType.split("/")[0];
+
+              return type.startsWith(`${category}/`);
+            }
+
+            return false;
+          });
+        });
+
+        if (!matchingType) {
+          // No acceptable types found
+          return null;
+        }
+
+        // Try to get the blob for the matching type
+        try {
+          const blob = await item.getType(matchingType);
+
+          // Create a file from the blob
+          const fileName = `pasted-${new Date().getTime()}.${getExtensionFromMimeType(matchingType)}`;
+
+          return new File([blob], fileName, { type: matchingType });
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error("Error getting clipboard item:", error);
+
+          return null;
+        }
+      } else {
+        // If no accept prop, try to get the first type
+        try {
+          const firstType = types[0];
+          const blob = await item.getType(firstType);
+
+          // Create a file from the blob
+          const fileName = `pasted-${new Date().getTime()}.${getExtensionFromMimeType(firstType)}`;
+
+          return new File([blob], fileName, { type: firstType });
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error("Error getting clipboard item:", error);
+
+          return null;
+        }
+      }
+    },
+    [accept],
+  );
+
+  // Helper function to get file extension from MIME type
+  const getExtensionFromMimeType = (mimeType: string): string => {
+    const mimeToExt: Record<string, string> = {
+      "image/png": "png",
+      "image/jpeg": "jpg",
+      "image/jpg": "jpg",
+      "image/gif": "gif",
+      "image/webp": "webp",
+      "image/svg+xml": "svg",
+      "text/plain": "txt",
+      "application/pdf": "pdf",
+      "application/json": "json",
+      "application/xml": "xml",
+      "text/html": "html",
+      "text/csv": "csv",
+    };
+
+    return mimeToExt[mimeType] || "bin";
+  };
+
+  // Function to handle pasting from clipboard
+  const handlePaste = useCallback(async () => {
+    try {
+      setPasteError(null);
+
+      // Check if clipboard API is available
+      if (!navigator.clipboard || !navigator.clipboard.read) {
+        setPasteError(t("clipboard-api-not-supported-in-this-browser"));
+
+        return;
+      }
+
+      // Read clipboard data
+      const clipboardItems = await navigator.clipboard.read();
+
+      if (clipboardItems.length === 0) {
+        setPasteError(t("clipboard-is-empty"));
+
+        return;
+      }
+
+      // Convert clipboard items to files
+      const newFiles: File[] = [];
+
+      for (const item of clipboardItems) {
+        const file = await clipboardItemToFile(item);
+
+        if (file) {
+          newFiles.push(file);
+        }
+      }
+
+      if (newFiles.length === 0) {
+        setPasteError(
+          t("no-acceptable-content-found-in-clipboard", {
+            acceptableTypes: accept ? accept : "",
+          }),
+        );
+
+        return;
+      }
+
+      // Update files based on multiple flag
+      if (multiple) {
+        updateFiles([...files, ...newFiles]);
+      } else {
+        // If not multiple, just use the first file
+        updateFiles([newFiles[0]]);
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Error pasting from clipboard:", error);
+      setPasteError(t("failed-to-paste-from-clipboard"));
+    }
+  }, [multiple, files, clipboardItemToFile, updateFiles, accept]);
+
+  // Create paste button element
+  const pasteButtonElement = useMemo(
+    () =>
+      pasteButton ? (
+        cloneElement(pasteButton, {
+          disabled: props.isDisabled,
+          onPress: (ev) => {
+            handlePaste();
+            pasteButton.props.onPress?.(ev);
+          },
+        })
+      ) : (
+        <Button
+          color="secondary"
+          disabled={props.isDisabled}
+          startContent={<PasteIcon />}
+          onPress={handlePaste}
+        >
+          {pasteButtonText}
+        </Button>
+      ),
+    [pasteButton, pasteButtonText, handlePaste, props.isDisabled],
+  );
+
   const topbarElement = useMemo(() => {
     if (topbar) {
       return cloneElement(topbar, {
@@ -308,7 +487,7 @@ const FileUpload = forwardRef<"div", FileUploadProps>((props, ref) => {
         })
       ) : (
         <Button
-          color="warning"
+          color="primary"
           disabled={props.isDisabled}
           onPress={() => {
             onReset();
@@ -331,6 +510,7 @@ const FileUpload = forwardRef<"div", FileUploadProps>((props, ref) => {
           {multiple && files.length !== 0 && addButtonElement}
           {files.length !== 0 && resetButtonElement}
           {browseButtonElement}
+          {showPasteButton && pasteButtonElement}
           {uploadButtonElement}
         </div>
       );
@@ -354,6 +534,8 @@ const FileUpload = forwardRef<"div", FileUploadProps>((props, ref) => {
     addButtonElement,
     resetButtonElement,
     uploadButton,
+    showPasteButton,
+    pasteButtonElement,
   ]);
 
   // Add dragOver styles to the base styles
@@ -418,6 +600,12 @@ const FileUpload = forwardRef<"div", FileUploadProps>((props, ref) => {
 
       {topbarElement}
 
+      {pasteError && (
+        <div className="text-danger text-sm p-2 mt-1 bg-danger-50 rounded">
+          {pasteError}
+        </div>
+      )}
+
       {isDragging && (
         <div className="absolute inset-0 flex items-center justify-center bg-primary-50 bg-opacity-80 text-primary-600 text-xl font-medium rounded-lg z-10">
           {dragDropZoneText}

client/src/components/file-upload/use-file-upload.ts

@@ -102,6 +102,22 @@ interface Props extends Omit<HTMLHeroUIProps<"div">, "onChange"> {
    * Triggered when file(s) selected, added or removed.
    */
   onChange?: (files: File[]) => void;
+  /**
+   * Whether to show the paste button
+   * @default false
+   */
+  showPasteButton?: boolean;
+
+  /**
+   * Text to display on the paste button
+   * @default "Paste"
+   */
+  pasteButtonText?: string;
+
+  /**
+   * Custom paste button element
+   */
+  pasteButton?: ReactElement<ButtonProps>;
 }
 
 export type UseFileUploadProps = Props & FileUploadVariantProps;

client/src/components/icons.tsx

@@ -1,3 +1,26 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2025 Ronan LE MEILLAT
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
 import * as React from "react";
 
 import { IconSvgProps } from "@/types";
@@ -268,3 +291,22 @@ export const DownloadIcon = (props: IconSvgProps) => {
     </svg>
   );
 };
+
+export const PasteIcon = (props: IconSvgProps) => {
+  return (
+    <svg
+      fill="none"
+      height={props.size || props.height || 18}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width={props.size || props.width || 18}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+      <rect height="4" rx="1" ry="1" width="8" x="8" y="2" />
+    </svg>
+  );
+};

client/src/locales/base/ar-SA.json

@@ -59,5 +59,9 @@
   "download-backup": "تنزيل النسخ الاحتياطي",
   "browse": "تصفح",
   "drop-your-image-here": "أسقط صورتك هنا",
-  "reset": "إعادة ضبط"
+  "reset": "إعادة ضبط",
+  "paste-from-clipboard": "لصق من الحافظة",
+  "no-acceptable-content-found-in-clipboard": "لا يوجد محتوى مقبول ({{accessableTypes}}) الموجود في الحافظة",
+  "clipboard-is-empty": "الحافظة فارغة",
+  "failed-to-paste-from-clipboard": "فشل لصق من الحافظة"
 }

client/src/locales/base/en-US.json

@@ -59,5 +59,10 @@
   "download-backup": "Download Backup",
   "browse": "Browse",
   "reset": "Reset",
-  "drop-your-image-here": "Drop your image here"
+  "drop-your-image-here": "Drop your image here",
+  "paste-from-clipboard": "Paste from Clipboard",
+  "no-acceptable-content-found-in-clipboard": "No acceptable ({{acceptableTypes}}) content found in clipboard",
+  "clipboard-is-empty": "Clipboard is empty",
+  "clipboard-api-not-supported-in-this-browser": "Clipboard API not supported in this browser",
+  "failed-to-paste-from-clipboard": "Failed to paste from clipboard"
 }

client/src/locales/base/es-ES.json

@@ -59,5 +59,9 @@
   "download-backup": "Descargar copia de seguridad",
   "browse": "Navegar",
   "drop-your-image-here": "Deja tu imagen aquí",
-  "reset": "Reiniciar"
+  "reset": "Reiniciar",
+  "paste-from-clipboard": "Pegar del portapapeles",
+  "no-acceptable-content-found-in-clipboard": "No se encuentra el contenido aceptable ({{aceptableTypes}}) que se encuentra en el portapapeles",
+  "clipboard-is-empty": "El portapapeles está vacío",
+  "failed-to-paste-from-clipboard": "No se pudo pegar desde el portapapeles"
 }