ホーム/コンポーネント/フォームと入力/ファイルドロップ 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 />

Prop	Type	Default	Description
onFile*	(file: File) => void	—	ファイル選択時のコールバック
accept	string	—	受け入れるファイル形式（デフォルト: .csv）
disabled	boolean	—	無効状態
label	string	—	表示テキスト
hint	string	—	ヒントテキスト