検索

メニュー

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

外観

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

スクリーンショット：通常時（ファイル未選択）のファイルアップロードを構成する各パーツに、それぞれ①②③④⑤⑥⑦の番号を割り付けている。①はファイル選択ボタン。②はチェックボックスとそれに対応する「ドロップ領域を全画面に広げる」のラベル。③はドロップエリアで①と②を内包している。③の上に、④項目ラベルと⑤要否ラベルが横並び、その次の行に⑥サポートテキスト。③の下に⑦ファイル未選択メッセージ。
  • ① ファイル選択ボタン（必須）
  • ② ドロップ領域拡大チェックボックス（③がある時必須）
  • ③ ドロップエリア
    ドロップエリアはファイル選択ボタンの後ろのテキスト「または、このエリア内にドラッグ＆ドロップ」をともないます。
    ①と②の間は少なくとも56 CSS pxの空きを持ちます。幅はコンテンツ幅等に合わせて任意に設定できます。
  • ④ 項目ラベル（必須）
  • ⑤ 要否ラベル
  • ⑥ サポートテキスト
  • ⑦ ファイル未選択メッセージ（必須）

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

スクリーンショット：ファイル選択時かつエラーが発生しているファイルアップロードを構成する各パーツに、それぞれ①②③④の番号を割り付けている。①は選択ファイルサマリーでファイル選択ボタンの次の行に配置している。②はエラーテキストで選択ファイルサマリーの次の行に配置している。ドロップエリアはError-1のボーダーで囲われ、その下に番号付きリストの選択ファイル一覧、2つのファイルが連なる。連なる1つ目が、③選択ファイルの行で、解除ボタン、ファイル名、ファイルサイズ等のメタ情報と続く。2つ目が④エラー付きの選択ファイルの行で、解除ボタン、続いてError-1で表示されたファイル名、メタ情報、そしてファイル名の下にエラーテキストが連なる。
  • ① 選択ファイルサマリー
  • ② エラーテキスト（ファイル選択ボタンに関するエラー時必須）
  • ③ 選択ファイル
  • ④ エラーテキストをともなう選択ファイル

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

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

スクリーンショット：左に、ドロップ領域拡大チェックボックスにチェックが入った状態のファイルアップロードコンポーネントが配置されたブラウザ、およびその外側にファイルをドラッグ中のマウスカーソルが置かれたもの。右に、ビューポート全体がSuccess-1のボーダーおよびGreen-50の背景色で、中央に「このエリア内にファイルをドラッグ＆ドロップ」というテキストが表示された状態のブラウザ、およびそのブラウザ上にファイルをドラッグ中のマウスカーソルが重なったもの。左右のブラウザは、右向きの矢印で接続されている。

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