Upload

1import { Upload } from '@hua-labs/ui/form';
2import type { UploadedFile } from '@hua-labs/ui';
3const [files, setFiles] = useState<UploadedFile[]>([]);
4 
5const handleChange = (newFiles: File[]) => {
6  const uploadedFiles = newFiles.map((file) => ({
7    id: crypto.randomUUID(),
8    file,
9    name: file.name,
10    size: file.size,
11    type: file.type,
12    status: "success" as const,
13  }));
14  setFiles((prev) => [...prev, ...uploadedFiles]);
15};
16 
17<Upload
18  files={files}
19  onChange={handleChange}
20  onRemove={(file) => setFiles((prev) => prev.filter((f) => f.id !== file.id))}
21/>

1<Upload
2  accept="image/*"
3  maxSize={5 * 1024 * 1024} // 5MB
4  files={files}
5  onChange={handleChange}
6  onRemove={handleRemove}
7  placeholder="이미지를 선택하거나 드래그하세요"
8/>

1<Upload
2  multiple
3  maxFiles={5}
4  maxSize={10 * 1024 * 1024} // 10MB
5  files={files}
6  onChange={handleChange}
7  onRemove={handleRemove}
8  placeholder="최대 5개 파일 (각 10MB 이하)"
9/>

1// 파일 상태 업데이트 예시
2const uploadFile = async (file: UploadedFile) => {
3  // 업로드 시작
4  updateFileStatus(file.id, { status: "uploading", progress: 0 });
5 
6  try {
7    // 실제 업로드 로직 (예: XMLHttpRequest with progress)
8    const url = await uploadToServer(file.file, (progress) => {
9      updateFileStatus(file.id, { progress });
10    });
11 
12    updateFileStatus(file.id, { status: "success", url });
13  } catch (error) {
14    updateFileStatus(file.id, { status: "error", error: "업로드 실패" });
15  }
16};