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

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};