UI Component Lab English

← コンポーネント一覧

入力

File upload ファイルアップロード（ドロップエリア）

端末にあるファイルを、ボタンで選ぶかドラッグして入れることで指定する部品。

PDF・PNG・JPEG、1ファイル10MBまで。または、このエリア内にドラッグ＆ドロップしてください。

未選択

別名

見分けるポイント

「ファイルを選択」ボタンがあり、ファイルを落とせる点線の枠に入っていることが多い。選んだファイルは名前と大きさが下に並ぶ。

挙動

  • ボタンを押すと OS のファイル選択画面が開く。
  • 点線の枠にファイルを落としても選べる。このデモはネイティブの <input type="file"> を使い、周りの枠へのドロップも受け付けている。
  • 選んだファイルは1件ずつ解除できる。解除するとフォーカスはファイル選択ボタンに戻る。

キーボード操作

キー動作
Enter / Spaceファイル選択ボタンでは選択画面を開き、解除ボタンではそのファイルを外す。
Tabボタンの間を移動する。

使い分け・注意点

  • ファイル選択ボタンを必ず置く。ドラッグできない人もいるため、ドロップエリアだけの作りにはしない（WCAG 2.2 の 2.5.7「ドラッグ動作」）。
  • 選んだファイルは番号付きリストにし、各行にファイル名・大きさ・解除ボタンを置く。何も選んでいないときは「未選択」と表示する。
  • accept 属性はファイル選択画面での絞り込みにすぎない。サーバー側でもファイルを確かめる。
  • ボタン: ファイルアップロードの中心はボタンだが、押すとファイル選択画面が開き、選んだファイルをフォームの値として持つ。

出典