ファイルアップローダーFileUploaderExperimental
ドラッグ＆ドロップ対応のファイルアップロードです。
プレビュー
状態とバリエーション
標準
ドロップゾーン全体でクリック選択とドラッグ＆ドロップを受け付けます。
画像のみ
画像だけを受け付けるアップローダーとして使えます。
アップロード中
処理中は進捗、読み込みアイコン、状態テキストを同じ領域に表示します。
成功
アップロード後は成功状態を明示し、追加された件数を伝えます。
失敗
失敗時は警告表示で、何が失敗したかを明確にします。
無効化
アップロードできない状態では操作を無効化し、ツールチップで理由を補足します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| onValueChange | (files: File[]) => void | - | ファイルが選択またはドロップされた時に呼ばれます。 |
| maxFiles | number | 1 | 選択できる最大ファイル数です。 |
| maxSize | number | 5242880 (5MB) | 1ファイルあたりの最大サイズをバイト数で指定します。 |
| accept | Record<string, string[]> | - | 受け付けるファイル形式です。種類ごとに拡張子を指定します。 |
| disabled | boolean | false | アップロード操作を無効化します。 |
| labels | { browse?: ReactNode; drop?: ReactNode; maxSize?: (sizeMb: number) => ReactNode; removeFile?: string; fileTooLarge?: string } | - | ドロップゾーン、削除ボタン、エラーの文言を差し替えます。 |
使い方
Loading...