fix: app info modal avatar upload method replace (#5787)

xqvvu · web-flow · commit 6758199729ac · 2025-10-20T17:43:56.000+08:00
* fix: app info modal avatar upload method replace

* chore: replace all useSelectFile with useUploadAvatar
diff --git a/projects/app/src/pageComponents/app/detail/InfoModal.tsx b/projects/app/src/pageComponents/app/detail/InfoModal.tsx
@@ -1,7 +1,6 @@
 import CollaboratorContextProvider from '@/components/support/permission/MemberManager/context';
 import ResumeInherit from '@/components/support/permission/ResumeInheritText';
 import { AppContext } from './context';
-import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { resumeInheritPer } from '@/web/core/app/api';
 import {
   deleteAppCollaborators,
@@ -21,7 +20,6 @@ import {
 import type { RequireOnlyOne } from '@fastgpt/global/common/type/utils';
 import type { AppSchema } from '@fastgpt/global/core/app/type.d';
 import { AppRoleList } from '@fastgpt/global/support/permission/app/constant';
-import type { PermissionValueType } from '@fastgpt/global/support/permission/type';
 import Avatar from '@fastgpt/web/components/common/Avatar';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import MyModal from '@fastgpt/web/components/common/MyModal';
@@ -32,20 +30,18 @@ import React, { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { useContextSelector } from 'use-context-selector';
 import { ReadRoleVal } from '@fastgpt/global/support/permission/constant';
+import { useUploadAvatar } from '@fastgpt/web/common/file/hooks/useUploadAvatar';
+import { getUploadAvatarPresignedUrl } from '@/web/common/file/api';
 
 const InfoModal = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation();
   const { toast } = useToast();
   const { updateAppDetail, appDetail, reloadApp } = useContextSelector(AppContext, (v) => v);
 
-  const {
-    File,
-    onOpen: onOpenSelectFile,
-    onSelectImage
-  } = useSelectFile({
-    fileType: '.jpg,.png',
-    multiple: false
-  });
+  const { Component: AvatarUploader, handleFileSelectorOpen: handleAvatarSelectorOpen } =
+    useUploadAvatar(getUploadAvatarPresignedUrl, {
+      onSuccess: (avatar) => setValue('avatar', avatar)
+    });
 
   const {
     register,
@@ -134,7 +130,7 @@ const InfoModal = ({ onClose }: { onClose: () => void }) => {
             borderRadius={'md'}
             mr={4}
             title={t('common:set_avatar')}
-            onClick={() => onOpenSelectFile()}
+            onClick={handleAvatarSelectorOpen}
           />
           <FormControl>
             <Input
@@ -220,15 +216,7 @@ const InfoModal = ({ onClose }: { onClose: () => void }) => {
         </Button>
       </ModalFooter>
 
-      <File
-        onSelect={(e) =>
-          onSelectImage(e, {
-            maxH: 300,
-            maxW: 300,
-            callback: (e) => setValue('avatar', e)
-          })
-        }
-      />
+      <AvatarUploader />
     </MyModal>
   );
 };
diff --git a/projects/app/src/pageComponents/dashboard/apps/CreateModal.tsx b/projects/app/src/pageComponents/dashboard/apps/CreateModal.tsx
@@ -10,7 +10,6 @@ import {
   Textarea,
   ModalFooter
 } from '@chakra-ui/react';
-import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { useForm } from 'react-hook-form';
 import { postCreateApp } from '@/web/core/app/api';
 import { useRouter } from 'next/router';
@@ -33,6 +32,8 @@ import {
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import FillRowTabs from '@fastgpt/web/components/common/Tabs/FillRowTabs';
 import { appTypeMap } from '@/pageComponents/app/constants';
+import { useUploadAvatar } from '@fastgpt/web/common/file/hooks/useUploadAvatar';
+import { getUploadAvatarPresignedUrl } from '@/web/common/file/api';
 
 type FormType = {
   avatar: string;
@@ -69,14 +70,13 @@ const CreateModal = ({ onClose, type }: { type: CreateAppType; onClose: () => vo
   });
 
   const avatar = watch('avatar');
-  const {
-    File,
-    onOpen: onOpenSelectFile,
-    onSelectImage
-  } = useSelectFile({
-    fileType: '.jpg,.png',
-    multiple: false
-  });
+
+  const { Component: AvatarUploader, handleFileSelectorOpen: handleAvatarSelectorOpen } =
+    useUploadAvatar(getUploadAvatarPresignedUrl, {
+      onSuccess(avatar) {
+        setValue('avatar', avatar);
+      }
+    });
 
   const { runAsync: onclickCreate, loading: isCreating } = useRequest2(
     async ({ avatar, name, curlContent }: FormType, templateId?: string) => {
@@ -153,7 +153,7 @@ const CreateModal = ({ onClose, type }: { type: CreateAppType; onClose: () => vo
               h={['28px', '36px']}
               cursor={'pointer'}
               borderRadius={'md'}
-              onClick={onOpenSelectFile}
+              onClick={handleAvatarSelectorOpen}
             />
           </MyTooltip>
           <Input
@@ -322,15 +322,7 @@ const CreateModal = ({ onClose, type }: { type: CreateAppType; onClose: () => vo
         )}
       </ModalFooter>
 
-      <File
-        onSelect={(e) =>
-          onSelectImage(e, {
-            maxH: 300,
-            maxW: 300,
-            callback: (e) => setValue('avatar', e)
-          })
-        }
-      />
+      <AvatarUploader />
     </MyModal>
   );
 };
diff --git a/projects/app/src/pageComponents/dashboard/apps/HttpToolsCreateModal.tsx b/projects/app/src/pageComponents/dashboard/apps/HttpToolsCreateModal.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { Box, Flex, Button, ModalBody, Input, Textarea, ModalFooter } from '@chakra-ui/react';
-import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { useForm } from 'react-hook-form';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import Avatar from '@fastgpt/web/components/common/Avatar';
@@ -15,6 +14,8 @@ import { useRouter } from 'next/router';
 import type { StoreSecretValueType } from '@fastgpt/global/common/secret/type';
 import LeftRadio from '@fastgpt/web/components/common/Radio/LeftRadio';
 import MyIcon from '@fastgpt/web/components/common/Icon';
+import { useUploadAvatar } from '@fastgpt/web/common/file/hooks/useUploadAvatar';
+import { getUploadAvatarPresignedUrl } from '@/web/common/file/api';
 
 export type HttpToolsType = {
   id?: string;
@@ -68,14 +69,12 @@ const HttpPluginCreateModal = ({ onClose }: { onClose: () => void }) => {
     }
   );
 
-  const {
-    File,
-    onOpen: onOpenSelectFile,
-    onSelectImage
-  } = useSelectFile({
-    fileType: 'image/*',
-    multiple: false
-  });
+  const { Component: AvatarUploader, handleFileSelectorOpen: handleAvatarSelectorOpen } =
+    useUploadAvatar(getUploadAvatarPresignedUrl, {
+      onSuccess(avatar) {
+        setValue('avatar', avatar);
+      }
+    });
 
   return (
     <>
@@ -100,7 +99,7 @@ const HttpPluginCreateModal = ({ onClose }: { onClose: () => void }) => {
                 h={['28px', '32px']}
                 cursor={'pointer'}
                 borderRadius={'md'}
-                onClick={onOpenSelectFile}
+                onClick={handleAvatarSelectorOpen}
               />
             </MyTooltip>
             <Input
@@ -185,15 +184,7 @@ const HttpPluginCreateModal = ({ onClose }: { onClose: () => void }) => {
           </Button>
         </ModalFooter>
       </MyModal>
-      <File
-        onSelect={(e) =>
-          onSelectImage(e, {
-            maxH: 300,
-            maxW: 300,
-            callback: (e) => setValue('avatar', e)
-          })
-        }
-      />
+      <AvatarUploader />
     </>
   );
 };
diff --git a/projects/app/src/pageComponents/dashboard/apps/JsonImportModal.tsx b/projects/app/src/pageComponents/dashboard/apps/JsonImportModal.tsx
@@ -1,4 +1,3 @@
-import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { Box, Button, Flex, Input, ModalBody, ModalFooter } from '@chakra-ui/react';
 import Avatar from '@fastgpt/web/components/common/Avatar';
 import MyModal from '@fastgpt/web/components/common/MyModal';
@@ -23,6 +22,8 @@ import {
   removeUtmParams,
   removeUtmWorkflow
 } from '@/web/support/marketing/utils';
+import { useUploadAvatar } from '@fastgpt/web/common/file/hooks/useUploadAvatar';
+import { getUploadAvatarPresignedUrl } from '@/web/common/file/api';
 
 type FormType = {
   avatar: string;
@@ -66,14 +67,14 @@ const JsonImportModal = ({ onClose }: { onClose: () => void }) => {
   };
 
   const avatar = watch('avatar');
-  const {
-    File,
-    onOpen: onOpenSelectFile,
-    onSelectImage
-  } = useSelectFile({
-    fileType: '.jpg,.png',
-    multiple: false
-  });
+
+  const { Component: AvatarUploader, handleFileSelectorOpen: handleAvatarSelectorOpen } =
+    useUploadAvatar(getUploadAvatarPresignedUrl, {
+      onSuccess(avatar) {
+        setValue('avatar', avatar);
+      }
+    });
+
   // If the user does not select an avatar, it will follow the type to change
   const selectedAvatar = useMemo(() => {
     if (avatar) return avatar;
@@ -162,7 +163,7 @@ const JsonImportModal = ({ onClose }: { onClose: () => void }) => {
                 h={['1.75rem', '2.25rem']}
                 cursor={'pointer'}
                 borderRadius={'md'}
-                onClick={onOpenSelectFile}
+                onClick={handleAvatarSelectorOpen}
               />
             </MyTooltip>
             <Input
@@ -190,15 +191,7 @@ const JsonImportModal = ({ onClose }: { onClose: () => void }) => {
           <Button onClick={handleSubmit(onSubmit)}>{t('common:Confirm')}</Button>
         </ModalFooter>
       </MyModal>
-      <File
-        onSelect={(e) =>
-          onSelectImage(e, {
-            maxH: 300,
-            maxW: 300,
-            callback: (e) => setValue('avatar', e)
-          })
-        }
-      />
+      <AvatarUploader />
     </>
   );
 };
diff --git a/projects/app/src/web/common/file/api.ts b/projects/app/src/web/common/file/api.ts
@@ -3,8 +3,6 @@ import type { UploadImgProps } from '@fastgpt/global/common/file/api.d';
 import type { CreatePostPresignedUrlResult } from '@fastgpt/service/common/s3/type';
 import { type AxiosProgressEvent } from 'axios';
 
-export const postUploadImg = (e: UploadImgProps) => POST<string>('/common/file/uploadImage', e);
-
 export const postUploadFiles = (
   data: FormData,
   onUploadProgress: (progressEvent: AxiosProgressEvent) => void
diff --git a/projects/app/src/web/common/file/controller.ts b/projects/app/src/web/common/file/controller.ts
@@ -1,8 +1,5 @@
-import { postUploadImg, postUploadFiles } from '@/web/common/file/api';
-import type { UploadImgProps } from '@fastgpt/global/common/file/api';
+import { postUploadFiles } from '@/web/common/file/api';
 import type { BucketNameEnum } from '@fastgpt/global/common/file/constants';
-import type { preUploadImgProps } from '@fastgpt/global/common/file/api';
-import { compressBase64Img, type CompressImgProps } from '@fastgpt/web/common/file/img';
 import type { UploadChatFileProps, UploadDatasetFileProps } from '@/pages/api/common/file/upload';
 
 /**
@@ -37,52 +34,3 @@ export const uploadFile2DB = async ({
   });
   return res;
 };
-
-/**
- * compress image. response base64
- * @param maxSize The max size of the compressed image
- */
-const compressBase64ImgAndUpload = async ({
-  base64Img,
-  maxW,
-  maxH,
-  maxSize,
-  ...props
-}: UploadImgProps & CompressImgProps) => {
-  const compressUrl = await compressBase64Img({
-    base64Img,
-    maxW,
-    maxH,
-    maxSize
-  });
-
-  return postUploadImg({
-    ...props,
-    base64Img: compressUrl
-  });
-};
-
-export const compressImgFileAndUpload = async ({
-  file,
-  ...props
-}: preUploadImgProps &
-  CompressImgProps & {
-    file: File;
-  }) => {
-  const reader = new FileReader();
-  reader.readAsDataURL(file);
-
-  const base64Img = await new Promise<string>((resolve, reject) => {
-    reader.onload = () => {
-      resolve(reader.result as string);
-    };
-    reader.onerror = (err) => {
-      reject('Load image error');
-    };
-  });
-
-  return compressBase64ImgAndUpload({
-    base64Img,
-    ...props
-  });
-};
diff --git a/projects/app/src/web/common/file/hooks/useSelectFile.tsx b/projects/app/src/web/common/file/hooks/useSelectFile.tsx
@@ -2,10 +2,7 @@ import React, { useRef, useCallback } from 'react';
 import { Box } from '@chakra-ui/react';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useMemoizedFn } from 'ahooks';
-import { compressImgFileAndUpload } from '../controller';
-import { getErrText } from '@fastgpt/global/common/error/utils';
 import { useTranslation } from 'next-i18next';
-import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 
 export const useSelectFile = (props?: {
   fileType?: string;
@@ -51,43 +48,8 @@ export const useSelectFile = (props?: {
     SelectFileDom.current && SelectFileDom.current.click();
   }, []);
 
-  const { runAsync: onSelectImage, loading } = useRequest2(
-    async (
-      e: File[],
-      {
-        maxW,
-        maxH,
-        callback
-      }: {
-        maxW?: number;
-        maxH?: number;
-        callback?: (e: string) => any;
-      }
-    ) => {
-      const file = e[0];
-      if (!file) return Promise.resolve('Can not found image');
-      try {
-        const src = await compressImgFileAndUpload({
-          file,
-          maxW,
-          maxH
-        });
-        callback?.(src);
-        return src;
-      } catch (err: any) {
-        toast({
-          title: getErrText(err, t('common:error.upload_image_error')),
-          status: 'warning'
-        });
-        return Promise.reject(getErrText(err, t('common:error.upload_image_error')));
-      }
-    }
-  );
-
   return {
     File,
-    onOpen,
-    onSelectImage,
-    loading
+    onOpen
   };
 };
