ファイルアップロード／ドロップエリア（使い方）

外観

コンポーネント要素：通常時（ファイル未選択）

• ファイル選択ボタン（必須）
• ドロップ領域拡大チェックボックス（がある時必須）
• ドロップエリア
  ドロップエリアはファイル選択ボタンの後ろのテキスト「または、このエリア内にドラッグ＆ドロップ」をともないます。
  との間は少なくとも56 CSS pxの空きを持ちます。幅はコンテンツ幅等に合わせて任意に設定できます。
• 項目ラベル（必須）
• 要否ラベル
• サポートテキスト
• ファイル未選択メッセージ（必須）

コンポーネント要素：ファイル選択時、エラー

• エラーテキスト（ファイル選択ボタンに関するエラー時必須）
• 選択ファイル
• エラーテキストをともなう選択ファイル

ドラッグ＆ドロップの範囲の拡大

ファイル選択をドラッグ＆ドロップで行うとき、ドラッグ操作に不慣れだったり操作上の困難があったりする状況においては、ターゲットエリアが広いほうが使いやすい場合があります。一方で、ドラッグ操作を容易に正確に行える状況においては、画面の見通しが阻害されないことのほうが重要となります。そのため本コンポーネントは、ドラッグ＆ドロップの範囲をウィンドウ全体に広げるかどうかの選択を、ユーザーの判断に委ねる構造になっています。

ターゲットエリアを広げた場合、ドラッグ＆ドロップの範囲はブラウザのビューポート領域の全体となります。ファイルのドラッグ状態にあるマウスカーソルがビューポートに重なると、ファイルのドラッグ＆ドロップを促すメッセージがビューポートのサイズに合わせて表示され、全体がドロップエリアとなります。