ファイルアップロード

キーボードでも操作できる、ドラッグ＆ドロップのアップロード領域です。拡張子とファイルサイズの検証、周囲を巡る進捗アニメーション、独自の保存先につなぐ完了コールバックを備えています。

ドラッグ&ドロップでアップロードまたはドロップ 選択する

PDF, JPG, PNG, XLSX (最大) 8 MB)

アップロード ...

正常にアップロード!

インストール

CLI または手動でファイルアップロードコンポーネントを追加できます。

ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.

CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。

npx boardui@latest add file-upload

共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。

バリデーション

受け入れられたファイルタイプを組み合わせる allowedExtensions そしてサイズの天井と maxBytes. コンポーネントは、そのプロップから独自のヘルパーテキストと拒絶メッセージを更新します。

<FileUpload allowedExtensions={["pdf", "png"]} maxBytes={4 * 1024 * 1024} onUploadComplete={saveFile}/>

ファイルアイコン

組み込みアイコンは、選択した拡張子に従います。 使用する renderFileIcon 自社のファイルタイプのアートワークやアイコンシステムがある場合。

import { RiFileCloudLine } from "@remixicon/react"; <FileUpload renderFileIcon={() => ( <RiFileCloudLine className="size-6 text-foreground-icon-secondary" aria-hidden /> )}/>