fix: upload remote file

web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx

@@ -1,6 +1,5 @@
 import {
   memo,
-  useMemo,
 } from 'react'
 import {
   RiDeleteBinLine,
@@ -35,17 +34,9 @@ const FileInAttachmentItem = ({
   onRemove,
   onReUpload,
 }: FileInAttachmentItemProps) => {
-  const { id, name, type, progress, supportFileType, base64Url, url } = file
-  const ext = getFileExtension(name, type)
+  const { id, name, type, progress, supportFileType, base64Url, url, isRemote } = file
+  const ext = getFileExtension(name, type, isRemote)
   const isImageFile = supportFileType === SupportUploadFileTypes.image
-  const nameArr = useMemo(() => {
-    const nameMatch = name.match(/(.+)\.([^.]+)$/)
-
-    if (nameMatch)
-      return [nameMatch[1], nameMatch[2]]
-
-    return [name, '']
-  }, [name])
 
   return (
     <div className={cn(
@@ -75,12 +66,7 @@ const FileInAttachmentItem = ({
           className='flex items-center mb-0.5 system-xs-medium text-text-secondary truncate'
           title={file.name}
         >
-          <div className='truncate'>{nameArr[0]}</div>
-          {
-            nameArr[1] && (
-              <span>.{nameArr[1]}</span>
-            )
-          }
+          <div className='truncate'>{name}</div>
         </div>
         <div className='flex items-center system-2xs-medium-uppercase text-text-tertiary'>
           {
@@ -93,7 +79,11 @@ const FileInAttachmentItem = ({
               <span className='mx-1 system-2xs-medium'>•</span>
             )
           }
-          <span>{formatFileSize(file.size || 0)}</span>
+          {
+            !!file.size && (
+              <span>{formatFileSize(file.size)}</span>
+            )
+          }
         </div>
       </div>
       <div className='shrink-0 flex items-center'>

web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx

@@ -31,8 +31,8 @@ const FileItem = ({
   onRemove,
   onReUpload,
 }: FileItemProps) => {
-  const { id, name, type, progress, url } = file
-  const ext = getFileExtension(name, type)
+  const { id, name, type, progress, url, isRemote } = file
+  const ext = getFileExtension(name, type, isRemote)
   const uploadError = progress === -1
 
   return (
@@ -75,7 +75,9 @@ const FileItem = ({
               </>
             )
           }
-          {formatFileSize(file.size || 0)}
+          {
+            !!file.size && formatFileSize(file.size)
+          }
         </div>
         {
           showDownloadAction && (

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

@@ -188,6 +188,17 @@ export const useFile = (fileConfig: FileUpload) => {
     }
   }, [fileStore, notify, t, handleUpdateFile, params])
 
+  const startProgressTimer = useCallback((fileId: string) => {
+    const timer = setInterval(() => {
+      const files = fileStore.getState().files
+      const file = files.find(file => file.id === fileId)
+
+      if (file && file.progress < 80 && file.progress >= 0)
+        handleUpdateFile({ ...file, progress: file.progress + 20 })
+      else
+        clearTimeout(timer)
+    }, 200)
+  }, [fileStore, handleUpdateFile])
   const handleLoadFileFromLink = useCallback((url: string) => {
     const allowedFileTypes = fileConfig.allowed_file_types
 
@@ -197,11 +208,13 @@ export const useFile = (fileConfig: FileUpload) => {
       type: '',
       size: 0,
       progress: 0,
-      transferMethod: TransferMethod.remote_url,
+      transferMethod: TransferMethod.local_file,
       supportFileType: '',
       url,
+      isRemote: true,
     }
     handleAddFile(uploadingFile)
+    startProgressTimer(uploadingFile.id)
 
     uploadRemoteFileInfo(url).then((res) => {
       const newFile = {
@@ -221,7 +234,7 @@ export const useFile = (fileConfig: FileUpload) => {
       notify({ type: 'error', message: t('common.fileUploader.pasteFileLinkInvalid') })
       handleRemoveFile(uploadingFile.id)
     })
-  }, [checkSizeLimit, handleAddFile, handleUpdateFile, notify, t, handleRemoveFile, fileConfig?.allowed_file_types])
+  }, [checkSizeLimit, handleAddFile, handleUpdateFile, notify, t, handleRemoveFile, fileConfig?.allowed_file_types, startProgressTimer])
 
   const handleLoadFileFromLinkSuccess = useCallback(() => { }, [])
 

web/app/components/base/file-uploader/types.ts

@@ -29,4 +29,5 @@ export type FileEntity = {
   uploadedId?: string
   base64Url?: string
   url?: string
+  isRemote?: boolean
 }

web/app/components/base/file-uploader/utils.ts

@@ -43,10 +43,13 @@ export const fileUpload: FileUpload = ({
     })
 }
 
-export const getFileExtension = (fileName: string, fileMimetype: string) => {
+export const getFileExtension = (fileName: string, fileMimetype: string, isRemote?: boolean) => {
   if (fileMimetype)
     return mime.getExtension(fileMimetype) || ''
 
+  if (isRemote)
+    return ''
+
   if (fileName) {
     const fileNamePair = fileName.split('.')
     const fileNamePairLength = fileNamePair.length

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

@@ -133,6 +133,7 @@ const ImageList: FC<ImageListProps> = ({
         <ImagePreview
           url={imagePreviewUrl}
           onCancel={() => setImagePreviewUrl('')}
+          title=''
         />
       )}
     </div>