Spaces:
Sleeping
Sleeping
File size: 4,792 Bytes
01d5a5d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 |
'use client';
import { useState, useEffect } from 'react';
import { Modal, Upload, message } from 'antd';
import type { RcFile, UploadFile } from 'antd/es/upload';
import type { UploadChangeParam } from 'antd/es/upload/interface';
import { PlusOutlined } from '@ant-design/icons';
import { uploadLoadAvatar } from '@/service/info';
import { useLoadInfoStore } from '@/store/useLoadInfoStore';
interface AvatarUploadProps {
open: boolean;
onClose: () => void;
onAvatarChange: (avatarUrl: string) => void;
currentAvatar?: string;
}
export default function AvatarUpload({
open,
onClose,
onAvatarChange,
currentAvatar
}: AvatarUploadProps) {
const [previewOpen, setPreviewOpen] = useState(false);
const [previewImage, setPreviewImage] = useState('');
const [fileList, setFileList] = useState<any[]>([]);
const [messageApi, contextHolder] = message.useMessage();
const { loadInfo } = useLoadInfoStore();
const beforeUpload = (file: RcFile) => {
if (!file) return false;
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('You can only upload JPG/PNG file!');
return false;
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
return false;
}
return true;
};
const handlePreview = async (file: UploadFile) => {
if (file.originFileObj) {
const reader = new FileReader();
reader.onload = () => {
setPreviewImage(reader.result as string);
setPreviewOpen(true);
};
reader.readAsDataURL(file.originFileObj);
} else if (file.url) {
setPreviewImage(file.url);
setPreviewOpen(true);
}
};
useEffect(() => {
if (currentAvatar) {
setFileList([
{
uid: '-1',
name: 'current-avatar.png',
status: 'done',
url: currentAvatar
}
]);
} else {
setFileList([]);
}
}, [currentAvatar]);
const handleChange = async (info: UploadChangeParam<UploadFile>) => {
const { status } = info.file;
if (status === 'uploading') {
setFileList([{ ...info.file }]);
return;
}
if (status === 'done' && info.file.originFileObj) {
const file = info.file.originFileObj;
// Convert file to base64
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = async () => {
const base64Url = reader.result as string;
try {
// Directly use base64 string for upload, no longer using FormData
if (loadInfo) {
const res = await uploadLoadAvatar(loadInfo.name, {
avatar_data: base64Url
});
if (res.data.code === 0) {
// Use base64 image as avatar
setFileList([
{
uid: '-1',
name: file.name,
status: 'done',
url: base64Url
}
]);
onAvatarChange(base64Url);
useLoadInfoStore.getState().fetchLoadInfo();
messageApi.success('Avatar uploaded successfully');
} else {
setFileList([]);
messageApi.error(res.data.message);
}
}
} catch (err: any) {
setFileList([]);
messageApi.error(err.message || 'Failed to upload avatar');
}
};
}
};
useEffect(() => {
return () => {
fileList.forEach((file) => {
if (file.url?.startsWith('blob:')) {
URL.revokeObjectURL(file.url);
}
});
};
}, [fileList]);
return (
<Modal destroyOnClose footer={null} onCancel={onClose} open={open} title="Upload Avatar">
<div className="p-4">
{contextHolder}
<Upload
accept="image/png,image/jpeg"
beforeUpload={beforeUpload}
fileList={fileList}
listType="picture-card"
maxCount={1}
onChange={handleChange}
onPreview={handlePreview}
onRemove={() => {
setFileList([]);
onAvatarChange('');
}}
showUploadList={{
showPreviewIcon: true,
showRemoveIcon: true,
showDownloadIcon: false
}}
>
{fileList.length >= 1 ? null : (
<div>
<PlusOutlined />
<div style={{ marginTop: 8 }}>Upload</div>
</div>
)}
</Upload>
</div>
<Modal footer={null} onCancel={() => setPreviewOpen(false)} open={previewOpen}>
<img alt="Preview" src={previewImage} style={{ width: '100%' }} />
</Modal>
</Modal>
);
}
|