feat: drag to upload image (#1666)

web/app/components/base/image-uploader/uploader.tsx

@@ -1,11 +1,8 @@
 import type { ChangeEvent, FC } from 'react'
 import { useState } from 'react'
-import { useParams } from 'next/navigation'
-import { useTranslation } from 'react-i18next'
-import { imageUpload } from './utils'
+import { useLocalFileUploader } from './hooks'
 import type { ImageFile } from '@/types/app'
-import { ALLOW_FILE_EXTENSIONS, TransferMethod } from '@/types/app'
-import { useToastContext } from '@/app/components/base/toast'
+import { ALLOW_FILE_EXTENSIONS } from '@/types/app'
 
 type UploaderProps = {
   children: (hovering: boolean) => JSX.Element
@@ -21,9 +18,7 @@ const Uploader: FC<UploaderProps> = ({
   disabled,
 }) => {
   const [hovering, setHovering] = useState(false)
-  const params = useParams()
-  const { notify } = useToastContext()
-  const { t } = useTranslation()
+  const { handleLocalFileUpload } = useLocalFileUploader({ limit, onUpload, disabled })
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
@@ -31,49 +26,7 @@ const Uploader: FC<UploaderProps> = ({
     if (!file)
       return
 
-    if (limit && 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)
+    handleLocalFileUpload(file)
   }
 
   return (