ファイル選択

ファイル選択ボタン

ファイル選択ボタンのコンポーネントでは、label要素にsu-form-file-input-buttonクラスを指定し、その子要素にインプット要素と、ボタンのラベルテキストとなる要素を配置します。複数ファイル選択を許可する場合には、インプット要素にmultiple属性を指定します。

input要素単体ではなく、操作性やアクセシビリティの観点からlabel要素でラッピングするようにマークアップします。

内包するインプット要素は、ファイル選択のUIを持つため、input[type="file"]を用います。

また、選択したファイルの情報や選択解除のためのボタンを表示するために、兄弟要素としてsu-form-file-input-listクラスとdata-su-js="su-form-file-list"の属性値が付与された要素を配置します。

画像や動画、ドキュメントなどのファイル選択ができるボタン型のUIを持つインプット要素です。ファイル選択ができることを明示するスタイルが適用されます。

<div 
  class="su-form-file-input"
  data-su-js="su-form-file-input"
>
  <label class="su-form-file-input-button">
    <input type="file" name="file" multiple />
    <span>ファイル選択</span>
  </label>
  <!-- 選択済みファイルリスト要素 -->
  <div 
    class="su-form-file-input-list"
    data-su-js="su-form-file-input-list"
  ></div>
</div>

ファイル選択ボタンの塗り、ラベル文字色、またホバーやフォーカス時のアウトラインの色はCSS変数を使って変更することが可能です。

.su-form-file-input-button {
  --su-color-fill-button-file-input: red;
  --su-color-fill-button-file-input-hover: yellow;
  --su-color-fill-button-file-input-active: lime;
  --su-color-ring-button-file-input-focus: blue;
  --su-color-text-button-file-input: black;
  --su-size-text-button-file-input: 2rem;
  --su-size-radius-button-file-input: 99em;
}

ファイルドロップエリア

ファイルドロップエリアのコンポーネントでは、label要素にsu-form-file-input-file-drop-areaクラスを指定し、その子要素にインプット要素と、ボタンのラベルテキストとなる要素を配置します。複数ファイル選択を許可する場合には、インプット要素にmultiple属性を指定します。

エリア全体がインプット要素となり、ドラッグ&ドロップでファイルを選択しやすくなるスタイルが適用されるようになります。

※ドロップエリアをクリックやタップの操作でもファイル選択をすることができます。

<div 
  class="su-form-file-input"
  data-su-js="su-form-file-input"
>
  <label class="su-form-file-input-file-drop-area">
    <input type="file" name="file" multiple />
    <span>ドラッグ&ドロップでファイルを選択</span>
  </label>
  <!-- 選択済みファイルリスト要素 -->
  <div
    class="su-form-file-input-list"
    data-su-js="su-form-file-input-list"
  ></div>
</div>

ファイルドロップエリアの背景色、ボーダースタイルやラベル文字色、デフォルトの幅と高さ、またホバーやフォーカス時のアウトラインの色はCSS変数を使って変更することが可能です。

.su-form-file-input-file-drop-area {
  --su-color-bg-drop-area-file-input: red;
  --su-color-border-drop-area-file-input: yellow;
  --su-color-bg-drop-area-file-input-hover: lime;
  --su-color-ring-drop-area-file-input-focus: blue;
  --su-color-text-drop-area-file-input: pink;
  --su-size-height-drop-area-file-input: 200px;
  --su-size-width-drop-area-file-input: 300px;
  --su-size-radius-drop-area-file-input: 0.5rem;
}

サムネイルプレビュー

ファイル選択ボタンやファイルドロップエリアは、選択済みのファイルリストの他にもサムネイルプレビューを表示することができます。選択したファイルが画像や動画の場合には、そのファイルをサムネイル画像として表示されることで選択されているファイルを視覚的に確認しやすくなります。

サムネイルプレビューを表示するには、各インプット要素や選択済みファイルリスト同様に、ファイル選択コンポーネントの子要素としてsu-form-file-input-thumbnail-previewクラスとdata-su-js="su-form-file-input-thumbnail-preview"の属性値が付与された要素を用意します。ファイルを選択するとその要素内にサムネイル画像が動的に表示されるようになります。

サムネイルは正方形で所定のサイズにトリミングされて表示します。また、動画の場合にはサムネイル上に再生時間がhh:mm:ssの形式で表示されます。その他ファイルの場合にはアイコンが表示されます。

※サムネイルプレビューに表示されるサムネイル画像の最小サイズは80pxとなります。
※動画ファイルでは負荷分散のためサムネイル生成を順次処理としているため、数が多い、あるいはデータサイズが大きい場合には生成に時間がかかることがあります。

<div 
  class="su-form-file-input"
  data-su-js="su-form-file-input"
>
  <!-- サムネイルプレビュー要素 -->
  <div 
    class="su-form-file-input-thumbnail-preview"
    data-su-js="su-form-file-input-thumbnail-preview"
  ></div>
  <label class="su-form-file-input-button">
    <input type="file" name="file" multiple />
    <span>ファイル選択</span>
  </label>
  <!-- 選択済みファイルリスト要素 -->
  <div 
    class="su-form-file-input-list"
    data-su-js="su-form-file-input-list"
  ></div>
</div>

ファイル要件の指定

ファイル選択のコンポーネントでは、ファイルの種類やサイズ、選択数の上限などの要件を指定することができます。su-form-file-inputのクラスを持つ要素に対して、data-su-file-constraintsの属性値にJSON形式で下記に従って要件を指定します。選択したファイルが要件に合わない場合には、エラーメッセージがアラートで表示されます。

※ファイル要件はJSON形式の正しいフォーマットで指定する必要があります。

<p class="su-text-caption">
  ファイルサイズが最大2MBの「.jpg」「.png」「.mp4」「.pdf」のファイルを5つまで選択できます。
</p>
<!-- ファイル要件をJSON形式で指定 -->
<div 
  class="su-form-file-input" 
  data-su-js="su-form-file-input"
  data-su-file-constraints='{
    "accept": [ ".jpg", ".png", ".mp4", ".pdf" ],
    "maxSize": "2MB",
    "maxCount": 5
  }'
>
  <div 
    class="su-form-file-input-thumbnail-preview"
    data-su-js="su-form-file-input-thumbnail-preview"
  ></div>
  <label class="su-form-file-input-file-drop-area">
    <input type="file" name="file" multiple />
    <span>ドラッグ&ドロップでファイルを選択</span>
  </label>
  <div
    class="su-form-file-input-list" data-su-js="su-form-file-input-list"
  ></div>
</div>

アクセシビリティの支援

ファイル選択のコンポーネントはアクセシビリティの対応として、input要素に対してaria-describedby属性を使うことで、より詳しくレンジ入力の説明を案内することができます。そのテキスト要素に対して、su-screen-reader-onlyのクラスを指定することで、スクリーンリーダー向けのテキスト要素として扱うことができ、テキストを非表示とすることができます。

また、選択済みのファイルリストやサムネイルのプレビュー要素などにも適切なaria-label属性を追加することで、より詳しくファイル選択の説明を案内することができます。

<!-- ファイル選択の制約条件を明示的に伝える -->
<p class="su-text-caption" id="file-constraints-description">
  ファイルサイズが最大2MBの「.jpg」「.png」「.mp4」「.pdf」のファイルを5つまで選択できます。
</p>
<div 
  class="su-form-file-input" 
  data-su-js="su-form-file-input"
  data-su-file-constraints='{
    "accept": [ ".jpg", ".png", ".mp4", ".pdf" ],
    "maxSize": "2MB",
    "maxCount": 5
  }'
  role="region"
  aria-labelledby="file-input-heading"
  aria-describedby="file-constraints-description"
>
  <h3 id="file-input-heading" class="su-screen-reader-only">ファイルアップロード</h3>

  <!-- サムネイルプレビューに適切なARIA属性を追加 -->
  <div 
    class="su-form-file-input-thumbnail-preview"
    data-su-js="su-form-file-input-thumbnail-preview"
    role="list"
    aria-label="選択されたファイルのプレビュー"
    aria-live="polite"
  ></div>
  
  <!-- ファイル入力要素に適切なラベルと説明を追加 -->
  <label class="su-form-file-input-file-drop-area">
    <input 
      type="file" 
      name="file" 
      multiple 
      aria-describedby="file-constraints-description file-input-instructions" 
      accept=".jpg,.png,.mp4,.pdf"
    />
    <span>ファイル選択</span>
    <span id="file-input-instructions" class="su-screen-reader-only">
      ファイルを選択するには、ボタンを押すか、このエリアにファイルをドラッグ&ドロップしてください。
    </span>
  </label>
  
  <!-- 選択済みファイルリストに適切なARIA属性を追加 -->
  <div
    class="su-form-file-input-list" 
    data-su-js="su-form-file-input-list"
    role="list"
    aria-label="選択されたファイル一覧"
    aria-live="polite"
  ></div>
</div>