DropZone
ドラッグアンドドロップでファイル選択させるためのコンポーネントです。広いドロップ領域でファイルをアップロードさせるときに使います。
使用上の注意
複数使用する場合
DropZoneは操作しやすさを担保するため一定以上の大きさでレイアウトする必要があり、視線を強く誘導する効果を持ちます。１つの画面で複数のDropZoneを乱雑に配置すると、過剰なメリハリによって他の入力項目の閲覧性が低下します。
複数使用する場合は、全体の閲覧性を維持できるようにレイアウトを検討するか、InputFileを使用してください。
Do
入力項目の大きさが揃っており、閲覧性が高い 
Don't
入力項目の大きさに差があり、項目を見落とす恐れがある モバイル
モバイルではドラッグアンドドロップでファイルを選択できません。 モバイル中心のユースケースでは、InputFileを使ってください。
使い方チェックリスト
DropZone
参照元：使用上の注意 > 複数使用する場合 「使用上の注意 > 複数使用する場合」の本文へ移動
- Should複数使用する場合は全体の閲覧性を維持できるようにレイアウトを検討するか、InputFile を使う
参照元：モバイル 「モバイル」の本文へ移動
- Mustモバイル中心のユースケースでは InputFile を使う
Props
accept
string
許可するファイル型を表す1つ以上の固有ファイル型指定子 （ドラッグ&ドロップの挙動には影響しません）
disabled
false true
multiple
false true
複数ファイルを選択できるかどうか
name
string
error
false true
フォームにエラーがあるかどうか
onSelectFiles必須
(e: ChangeEvent<HTMLInputElement> | DragEvent<HTMLElement>, files: FileList) => void
ボタンまたはドラッグ&ドロップでファイルが追加された時に発火するコールバック関数
selectButtonLabel
string
ファイル選択ボタンのラベル