FileUploadZone
드래그 앤 드롭 파일 업로드 컴포넌트입니다. 이미지, PDF, 문서 파일에서 OCR을 통해 세미나 정보를 추출합니다.
Installation
bash
npx axis-cli add file-upload-zoneUsage
파일을 드래그하거나 클릭하여 선택하세요
지원 형식: 이미지(JPG, PNG), PDF, 문서(DOCX, XLSX), 텍스트(TXT, CSV, JSON, MD)
tsx
import { FileUploadZone } from '@ax/ui'
export function Example() {
const handleUpload = async (files: File[], playId?: string) => {
const formData = new FormData()
files.forEach(f => formData.append('files', f))
if (playId) formData.append('play_id', playId)
const response = await fetch('/api/seminar/upload', {
method: 'POST',
body: formData,
})
return response.json()
}
return (
<FileUploadZone
onUpload={handleUpload}
onComplete={(seminars) => {
console.log('Extracted seminars:', seminars)
}}
/>
)
}Supported File Types
이미지
JPG, JPEG, PNG, WebP, GIF
OCR로 텍스트 추출
문서
PDF, DOCX
텍스트 및 이미지 추출
스프레드시트
XLSX, XLS, CSV
행별 세미나 정보 파싱
텍스트
TXT, JSON, MD
직접 텍스트 파싱
File Status
PDF
seminar-list.pdf
2.4 MB
IMG
screenshot.png
1.2 MB
3개 세미나 추출
XLS
data.xlsx
512 KB
파싱 실패: 잘못된 형식
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onUpload* | (files: File[], playId?: string) => Promise<UploadResponse> | - | 파일 업로드 핸들러 |
onComplete | (seminars: SeminarExtractResult[]) => void | - | 업로드 완료 콜백 |
className | string | - | 추가 CSS 클래스 |
UploadResponse Interface
| Prop | Type | Default | Description |
|---|---|---|---|
total_extracted* | number | - | 총 추출된 세미나 수 |
results* | UploadResult[] | - | 파일별 결과 목록 |
UploadResult Interface
| Prop | Type | Default | Description |
|---|---|---|---|
filename* | string | - | 파일명 |
extracted_count* | number | - | 추출된 세미나 수 |
seminars* | SeminarExtractResult[] | - | 추출된 세미나 목록 |
error | string | null | null | 오류 메시지 |