fix: upload custom file extension (#10801)

web/app/components/base/file-uploader/file-input.tsx

@@ -21,7 +21,7 @@ const FileInput = ({
 
   const allowedFileTypes = fileConfig.allowed_file_types
   const isCustom = allowedFileTypes?.includes(SupportUploadFileTypes.custom)
-  const exts = isCustom ? (fileConfig.allowed_file_extensions?.map(item => `.${item}`) || []) : (allowedFileTypes?.map(type => FILE_EXTS[type]) || []).flat().map(item => `.${item}`)
+  const exts = isCustom ? (fileConfig.allowed_file_extensions || []) : (allowedFileTypes?.map(type => FILE_EXTS[type]) || []).flat().map(item => `.${item}`)
   const accept = exts.join(',')
 
   return (

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

@@ -98,6 +98,7 @@ const FileItem = ({
             <ProgressCircle
               percentage={progress}
               size={12}
+              className='shrink-0'
             />
           )
         }

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

@@ -241,7 +241,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, fileConfig.allowed_file_extensions, startProgressTimer])
+  }, [checkSizeLimit, handleAddFile, handleUpdateFile, notify, t, handleRemoveFile, fileConfig?.allowed_file_types, fileConfig.allowed_file_extensions, startProgressTimer, params.token])
 
   const handleLoadFileFromLinkSuccess = useCallback(() => { }, [])
 

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

@@ -44,6 +44,12 @@ export const fileUpload: FileUpload = ({
 }
 
 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
@@ -52,12 +58,6 @@ export const getFileExtension = (fileName: string, fileMimetype: string, isRemot
       return fileNamePair[fileNamePairLength - 1]
   }
 
-  if (fileMimetype)
-    return mime.getExtension(fileMimetype) || ''
-
-  if (isRemote)
-    return ''
-
   return ''
 }
 
@@ -145,7 +145,7 @@ export const getFileNameFromUrl = (url: string) => {
 
 export const getSupportFileExtensionList = (allowFileTypes: string[], allowFileExtensions: string[]) => {
   if (allowFileTypes.includes(SupportUploadFileTypes.custom))
-    return allowFileExtensions.map(item => item.toUpperCase())
+    return allowFileExtensions.map(item => item.slice(1).toUpperCase())
 
   return allowFileTypes.map(type => FILE_EXTS[type]).flat()
 }

web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx

@@ -82,8 +82,6 @@ const FileUploadSetting: FC<Props> = ({
   const handleCustomFileTypesChange = useCallback((customFileTypes: string[]) => {
     const newPayload = produce(payload, (draft) => {
       draft.allowed_file_extensions = customFileTypes.map((v) => {
-        if (v.startsWith('.')) // Not start with dot
-          return v.slice(1)
         return v
       })
     })
@@ -118,7 +116,7 @@ const FileUploadSetting: FC<Props> = ({
               type={SupportUploadFileTypes.custom}
               selected={allowed_file_types.includes(SupportUploadFileTypes.custom)}
               onToggle={handleSupportFileTypeChange}
-              customFileTypes={allowed_file_extensions?.map(item => `.${item}`)}
+              customFileTypes={allowed_file_extensions}
               onCustomFileTypesChange={handleCustomFileTypesChange}
             />
           </div>