diff --git a/web/src/components/avatar-upload.tsx b/web/src/components/avatar-upload.tsx index af141b180..0071ba36a 100644 --- a/web/src/components/avatar-upload.tsx +++ b/web/src/components/avatar-upload.tsx @@ -1,5 +1,5 @@ import { transformFile2Base64 } from '@/utils/file-util'; -import { Pencil, Upload } from 'lucide-react'; +import { Pencil, Upload, XIcon } from 'lucide-react'; import { ChangeEventHandler, forwardRef, @@ -9,6 +9,7 @@ import { } from 'react'; import { useTranslation } from 'react-i18next'; import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'; +import { Button } from './ui/button'; import { Input } from './ui/input'; type AvatarUploadProps = { value?: string; onChange?: (value: string) => void }; @@ -31,6 +32,11 @@ export const AvatarUpload = forwardRef( [onChange], ); + const handleRemove = useCallback(() => { + setAvatarBase64Str(''); + onChange?.(''); + }, [onChange]); + useEffect(() => { if (value) { setAvatarBase64Str(value); @@ -59,6 +65,15 @@ export const AvatarUpload = forwardRef( className="absolute right-2 bottom-0 opacity-50 hidden group-hover:block" /> + )}