メニュー

ファイルアップロード/ドロップエリア概要

スクリーンショット:ファイル選択のアウトラインボタン、1つのチェックボックスとラベル、それらを完全に内包するドラッグ&ドロップのターゲットエリアからなるファイルアップロードが、上下2つに並んでいる。上のファイルアップロードは通常時の表示状態で、ターゲットエリアがGray-50に塗られGray-536のボーダーで囲われている。下のファイルアップロードはファイルのドラッグオーバー時の表示状態で、ターゲットエリアがGreen-50で塗られSuccess-1のボーダーで囲われている。

HTMLの<input type="file">に対応した、単体または複数のファイルを選択してアップロードできるようにするためのコンポーネントです。ファイルの選択はドラッグ&ドロップで行うこともできます。

ユースケース

  • フォームでファイルのアップロードを受け付けるとき
  • ウェブアプリケーションにおけるファイルの一覧画面で、対応したファイルを追加するとき

各種リソース

種別リソース状態
デザインデザインデータ(Figma)提供中
HTML版実装ソースコード(GitHub)提供予定
サンプル(Storybook)提供予定
React版実装ソースコード(GitHub)提供予定
サンプル(Storybook)提供予定