Skip to main content
BlueAI
BlueAIBlueAI Design System
JAEN
Home/Components/Form & Input/FileDropZone

FileDropZone

ドラッグ＆ドロップまたはクリックでファイルを選択するコンポーネント。

|
import { FileDropZone } from "@blueai/ui"

Examples

Default (CSV)

ファイルをドラッグ＆ドロップ、またはクリックして選択

対応形式: .csv

<FileDropZone onFile={(file) => console.log(file.name)} />
Image upload

画像をアップロード

対応形式: .png,.jpg,.jpeg

<FileDropZone
  onFile={(file) => console.log(file.name)}
  accept=".png,.jpg,.jpeg"
  label="画像をアップロード"
/>
Disabled

ファイルをドラッグ＆ドロップ、またはクリックして選択

対応形式: .csv

<FileDropZone onFile={() => {}} disabled />

Props

PropTypeDefaultDescription
onFile*(file: File) => void—ファイル選択時のコールバック
acceptstring—受け入れるファイル形式（デフォルト: .csv）
disabledboolean—無効状態
labelstring—表示テキスト
hintstring—ヒントテキスト