Feat: Add AvatarUpload component #3221 (#9777)

### What problem does this PR solve? Feat: Add AvatarUpload component #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-18 03:26:42 +08:00 · 2025-08-28 11:42:17 +08:00
parent bb9b9b8357
commit 59590e9aae
4 changed files with 76 additions and 19 deletions
--- a/web/src/components/avatar-upload.tsx
+++ b/web/src/components/avatar-upload.tsx
@ -0,0 +1,71 @@
+import { transformFile2Base64 } from '@/utils/file-util';
+import { Pencil, Upload } from 'lucide-react';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
+import { Input } from './ui/input';
+
+type AvatarUploadProps = { value?: string; onChange?: (value: string) => void };
+
+export function AvatarUpload({ value, onChange }: AvatarUploadProps) {
+  const { t } = useTranslation();
+  const [avatarBase64Str, setAvatarBase64Str] = useState(''); // Avatar Image base64
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    async (ev) => {
+      const file = ev.target?.files?.[0];
+      if (/\.(jpg|jpeg|png|webp|bmp)$/i.test(file?.name ?? '')) {
+        const str = await transformFile2Base64(file!);
+        setAvatarBase64Str(str);
+        onChange?.(str);
+      }
+      ev.target.value = '';
+    },
+    [onChange],
+  );
+
+  useEffect(() => {
+    if (value) {
+      setAvatarBase64Str(value);
+    }
+  }, [value]);
+
+  return (
+    <div className="flex justify-start items-end space-x-2">
+      <div className="relative group">
+        {!avatarBase64Str ? (
+          <div className="w-[64px] h-[64px] grid place-content-center border border-dashed	rounded-md">
+            <div className="flex flex-col items-center">
+              <Upload />
+              <p>{t('common.upload')}</p>
+            </div>
+          </div>
+        ) : (
+          <div className="w-[64px] h-[64px] relative grid place-content-center">
+            <Avatar className="w-[64px] h-[64px] rounded-md">
+              <AvatarImage className=" block" src={avatarBase64Str} alt="" />
+              <AvatarFallback></AvatarFallback>
+            </Avatar>
+            <div className="absolute inset-0 bg-[#000]/20 group-hover:bg-[#000]/60">
+              <Pencil
+                size={20}
+                className="absolute right-2 bottom-0 opacity-50 hidden group-hover:block"
+              />
+            </div>
+          </div>
+        )}
+        <Input
+          placeholder=""
+          type="file"
+          title=""
+          accept="image/*"
+          className="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
+          onChange={handleChange}
+        />
+      </div>
+      <div className="margin-1 text-muted-foreground">
+        {t('knowledgeConfiguration.photoTip')}
+      </div>
+    </div>
+  );
+}