Agentic UI/FileUploadZone

FileUploadZone

드래그 앤 드롭 파일 업로드 컴포넌트입니다. 이미지, PDF, 문서 파일에서 OCR을 통해 세미나 정보를 추출합니다.

Installation

bash
npx axis-cli add file-upload-zone

Usage

파일을 드래그하거나 클릭하여 선택하세요

지원 형식: 이미지(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

Pending
IMG

screenshot.png

1.2 MB

3개 세미나 추출

XLS

data.xlsx

512 KB

파싱 실패: 잘못된 형식

Props

PropTypeDefaultDescription
onUpload*(files: File[], playId?: string) => Promise<UploadResponse>-파일 업로드 핸들러
onComplete(seminars: SeminarExtractResult[]) => void-업로드 완료 콜백
classNamestring-추가 CSS 클래스

UploadResponse Interface

PropTypeDefaultDescription
total_extracted*number-총 추출된 세미나 수
results*UploadResult[]-파일별 결과 목록

UploadResult Interface

PropTypeDefaultDescription
filename*string-파일명
extracted_count*number-추출된 세미나 수
seminars*SeminarExtractResult[]-추출된 세미나 목록
errorstring | nullnull오류 메시지