feat: clipboard paste (#1663)

web/app/components/base/image-uploader/hooks.ts

@@ -1,9 +1,11 @@
-import { useMemo, useRef, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import type { ClipboardEvent } from 'react'
 import { useParams } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { imageUpload } from './utils'
 import { useToastContext } from '@/app/components/base/toast'
-import type { ImageFile } from '@/types/app'
+import { ALLOW_FILE_EXTENSIONS, TransferMethod } from '@/types/app'
+import type { ImageFile, VisionSettings } from '@/types/app'
 
 export const useImageFiles = () => {
   const params = useParams()
@@ -108,3 +110,81 @@ export const useImageFiles = () => {
     onClear: handleClear,
   }
 }
+
+type useClipboardUploaderProps = {
+  files: ImageFile[]
+  visionConfig?: VisionSettings
+  onUpload: (imageFile: ImageFile) => void
+}
+
+export const useClipboardUploader = ({ visionConfig, onUpload, files }: useClipboardUploaderProps) => {
+  const { notify } = useToastContext()
+  const params = useParams()
+  const { t } = useTranslation()
+
+  const handleClipboardPaste = useCallback((e: ClipboardEvent<HTMLTextAreaElement>) => {
+    if (!visionConfig || !visionConfig.enabled)
+      return
+
+    const disabled = files.length >= visionConfig.number_limits
+
+    if (disabled)
+      // TODO: leave some warnings?
+      return
+
+    const file = e.clipboardData?.files[0]
+
+    if (!file || !ALLOW_FILE_EXTENSIONS.includes(file.type.split('/')[1]))
+      return
+
+    const limit = +visionConfig.image_file_size_limit!
+
+    if (file.size > limit * 1024 * 1024) {
+      notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerLimit', { size: limit }) })
+      return
+    }
+
+    const reader = new FileReader()
+    reader.addEventListener(
+      'load',
+      () => {
+        const imageFile = {
+          type: TransferMethod.local_file,
+          _id: `${Date.now()}`,
+          fileId: '',
+          file,
+          url: reader.result as string,
+          base64Url: reader.result as string,
+          progress: 0,
+        }
+        onUpload(imageFile)
+        imageUpload({
+          file: imageFile.file,
+          onProgressCallback: (progress) => {
+            onUpload({ ...imageFile, progress })
+          },
+          onSuccessCallback: (res) => {
+            onUpload({ ...imageFile, fileId: res.id, progress: 100 })
+          },
+          onErrorCallback: () => {
+            notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerUploadError') })
+            onUpload({ ...imageFile, progress: -1 })
+          },
+        }, !!params.token)
+      },
+      false,
+    )
+    reader.addEventListener(
+      'error',
+      () => {
+        notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerReadError') })
+      },
+      false,
+    )
+    reader.readAsDataURL(file)
+  }, [visionConfig, files.length, notify, t, onUpload, params.token])
+
+  return {
+    onPaste: handleClipboardPaste,
+  }
+}