diff --git a/web/app/components/base/file-uploader/file-type-icon.tsx b/web/app/components/base/file-uploader/file-type-icon.tsx
index 0808d6b95f..ed4cdde7e7 100644
--- a/web/app/components/base/file-uploader/file-type-icon.tsx
+++ b/web/app/components/base/file-uploader/file-type-icon.tsx
@@ -18,62 +18,63 @@ import type { FileAppearanceType } from './types'
 import cn from '@/utils/classnames'
 
 const FILE_TYPE_ICON_MAP = {
-  [FileAppearanceTypeEnum.PDF]: {
+  [FileAppearanceTypeEnum.pdf]: {
     component: RiFilePdf2Fill,
     color: 'text-[#EA3434]',
   },
-  [FileAppearanceTypeEnum.IMAGE]: {
+  [FileAppearanceTypeEnum.image]: {
     component: RiFileImageFill,
     color: 'text-[#00B2EA]',
   },
-  [FileAppearanceTypeEnum.VIDEO]: {
+  [FileAppearanceTypeEnum.video]: {
     component: RiFileVideoFill,
     color: 'text-[#844FDA]',
   },
-  [FileAppearanceTypeEnum.AUDIO]: {
+  [FileAppearanceTypeEnum.audio]: {
     component: RiFileMusicFill,
     color: 'text-[#FF3093]',
   },
-  [FileAppearanceTypeEnum.DOCUMENT]: {
+  [FileAppearanceTypeEnum.document]: {
     component: RiFileTextFill,
     color: 'text-[#6F8BB5]',
   },
-  [FileAppearanceTypeEnum.CODE]: {
+  [FileAppearanceTypeEnum.code]: {
     component: RiFileCodeFill,
     color: 'text-[#BCC0D1]',
   },
-  [FileAppearanceTypeEnum.MARKDOWN]: {
+  [FileAppearanceTypeEnum.markdown]: {
     component: RiMarkdownFill,
     color: 'text-[#309BEC]',
   },
-  [FileAppearanceTypeEnum.OTHER]: {
+  [FileAppearanceTypeEnum.custom]: {
     component: RiFile3Fill,
     color: 'text-[#BCC0D1]',
   },
-  [FileAppearanceTypeEnum.EXCEL]: {
+  [FileAppearanceTypeEnum.excel]: {
     component: RiFileExcelFill,
     color: 'text-[#01AC49]',
   },
-  [FileAppearanceTypeEnum.WORD]: {
+  [FileAppearanceTypeEnum.word]: {
     component: RiFileWordFill,
     color: 'text-[#2684FF]',
   },
-  [FileAppearanceTypeEnum.PPT]: {
+  [FileAppearanceTypeEnum.ppt]: {
     component: RiFilePpt2Fill,
     color: 'text-[#FF650F]',
   },
-  [FileAppearanceTypeEnum.GIF]: {
+  [FileAppearanceTypeEnum.gif]: {
     component: RiFileGifFill,
     color: 'text-[#00B2EA]',
   },
 }
 type FileTypeIconProps = {
   type: FileAppearanceType
-  size?: 'sm' | 'lg'
+  size?: 'sm' | 'lg' | 'md'
   className?: string
 }
 const SizeMap = {
   sm: 'w-4 h-4',
+  md: 'w-5 h-5',
   lg: 'w-6 h-6',
 }
 const FileTypeIcon = ({
diff --git a/web/app/components/base/file-uploader/types.ts b/web/app/components/base/file-uploader/types.ts
index 06c3ba99d8..b84986e06b 100644
--- a/web/app/components/base/file-uploader/types.ts
+++ b/web/app/components/base/file-uploader/types.ts
@@ -1,18 +1,18 @@
 import type { TransferMethod } from '@/types/app'
 
 export enum FileAppearanceTypeEnum {
-  IMAGE = 'IMAGE',
-  VIDEO = 'VIDEO',
-  AUDIO = 'AUDIO',
-  DOCUMENT = 'DOCUMENT',
-  CODE = 'CODE',
-  PDF = 'PDF',
-  MARKDOWN = 'MARKDOWN',
-  EXCEL = 'EXCEL',
-  WORD = 'WORD',
-  PPT = 'PPT',
-  GIF = 'GIF',
-  OTHER = 'OTHER',
+  image = 'image',
+  video = 'video',
+  audio = 'audio',
+  document = 'document',
+  code = 'code',
+  pdf = 'pdf',
+  markdown = 'markdown',
+  excel = 'excel',
+  word = 'word',
+  ppt = 'ppt',
+  gif = 'gif',
+  custom = 'custom',
 }
 
 export type FileAppearanceType = keyof typeof FileAppearanceTypeEnum
diff --git a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
index b186206a6f..c3d52f265b 100644
--- a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
@@ -7,6 +7,7 @@ import cn from '@/utils/classnames'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import TagInput from '@/app/components/base/tag-input'
 import Checkbox from '@/app/components/base/checkbox'
+import { FileTypeIcon } from '@/app/components/base/file-uploader'
 
 type Props = {
   type: SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video | SupportUploadFileTypes.custom
@@ -45,7 +46,7 @@ const FileTypeItem: FC<Props> = ({
         ? (
           <div>
             <div className='flex items-center p-3 pb-2 border-b border-divider-subtle'>
-              <span className='shrink-0 w-4 h-4 bg-[#00B2EA]'></span>
+              <FileTypeIcon className='shrink-0' type={type} size='md' />
               <div className='mx-2 grow text-text-primary system-sm-medium'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
               <Checkbox className='shrink-0' checked={selected} />
             </div>
@@ -60,8 +61,7 @@ const FileTypeItem: FC<Props> = ({
         )
         : (
           <div className='flex items-center'>
-            {/* TODO: Wait File type icon */}
-            <span className='shrink-0 w-4 h-4 bg-[#00B2EA]'></span>
+            <FileTypeIcon className='shrink-0' type={type} size='md' />
             <div className='mx-2 grow'>
               <div className='text-text-primary system-sm-medium'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
               <div className='mt-1 text-text-tertiary system-2xs-regular-uppercase'>{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('appDebug.variableConfig.file.custom.description')}</div>