add copy paste image

Author: HenryHengZJ

dist/components/inputs/textInput/components/TextInput.d.ts.map

@@ -2440,6 +2440,28 @@ const TextInput = props => {
   const handleFileUploadClick = () => {
     if (fileUploadRef) fileUploadRef.click();
   };
+  const handlePaste = e => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    const imageFiles = [];
+    for (const item of items) {
+      if (item.kind === 'file' && item.type.startsWith('image/')) {
+        const file = item.getAsFile();
+        if (file) imageFiles.push(file);
+      }
+    }
+    if (imageFiles.length > 0 && (props.uploadsConfig?.isImageUploadAllowed || props.uploadsConfig?.isRAGFileUploadAllowed || props.isFullFileUpload)) {
+      e.preventDefault();
+      const dataTransfer = new DataTransfer();
+      imageFiles.forEach(file => dataTransfer.items.add(file));
+      const syntheticEvent = {
+        target: {
+          files: dataTransfer.files
+        }
+      };
+      props.handleFileChange(syntheticEvent);
+    }
+  };
   const handleKeyDown = e => {
     if (e.key === 'Enter' && !e.shiftKey) {
       const isIMEComposition = e.isComposing || e.keyCode === 229;
@@ -2489,6 +2511,7 @@ const TextInput = props => {
   return (() => {
     const _el$ = _tmpl$3$d(),
       _el$3 = _el$.firstChild;
+    _el$.addEventListener("paste", handlePaste);
     _el$.$$keydown = handleKeyDown;
     _el$.style.setProperty("margin", "auto");
     insert(_el$, createComponent(Show, {

dist/web.js

@@ -2446,6 +2446,28 @@
     const handleFileUploadClick = () => {
       if (fileUploadRef) fileUploadRef.click();
     };
+    const handlePaste = e => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+      const imageFiles = [];
+      for (const item of items) {
+        if (item.kind === 'file' && item.type.startsWith('image/')) {
+          const file = item.getAsFile();
+          if (file) imageFiles.push(file);
+        }
+      }
+      if (imageFiles.length > 0 && (props.uploadsConfig?.isImageUploadAllowed || props.uploadsConfig?.isRAGFileUploadAllowed || props.isFullFileUpload)) {
+        e.preventDefault();
+        const dataTransfer = new DataTransfer();
+        imageFiles.forEach(file => dataTransfer.items.add(file));
+        const syntheticEvent = {
+          target: {
+            files: dataTransfer.files
+          }
+        };
+        props.handleFileChange(syntheticEvent);
+      }
+    };
     const handleKeyDown = e => {
       if (e.key === 'Enter' && !e.shiftKey) {
         const isIMEComposition = e.isComposing || e.keyCode === 229;
@@ -2495,6 +2517,7 @@
     return (() => {
       const _el$ = _tmpl$3$d(),
         _el$3 = _el$.firstChild;
+      _el$.addEventListener("paste", handlePaste);
       _el$.$$keydown = handleKeyDown;
       _el$.style.setProperty("margin", "auto");
       insert(_el$, createComponent(Show, {

dist/web.umd.js

@@ -90,6 +90,27 @@ export const TextInput = (props: TextInputProps) => {
     if (fileUploadRef) fileUploadRef.click();
   };
 
+  const handlePaste = (e: ClipboardEvent) => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+
+    const imageFiles: File[] = [];
+    for (const item of items) {
+      if (item.kind === 'file' && item.type.startsWith('image/')) {
+        const file = item.getAsFile();
+        if (file) imageFiles.push(file);
+      }
+    }
+
+    if (imageFiles.length > 0 && (props.uploadsConfig?.isImageUploadAllowed || props.uploadsConfig?.isRAGFileUploadAllowed || props.isFullFileUpload)) {
+      e.preventDefault();
+      const dataTransfer = new DataTransfer();
+      imageFiles.forEach((file) => dataTransfer.items.add(file));
+      const syntheticEvent = { target: { files: dataTransfer.files } } as FileEvent<HTMLInputElement>;
+      props.handleFileChange(syntheticEvent);
+    }
+  };
+
   const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       const isIMEComposition = e.isComposing || e.keyCode === 229;
@@ -155,6 +176,7 @@ export const TextInput = (props: TextInputProps) => {
         color: props.textColor ?? defaultTextColor,
       }}
       onKeyDown={handleKeyDown}
+      onPaste={handlePaste}
     >
       <Show when={warningMessage() !== ''}>
         <div class="w-full px-4 pt-4 pb-1 text-red-500 text-sm" data-testid="warning-message">