File Upload

ドロップゾーン・ボタン起点のファイル選択・受理済みファイル一覧を持つアップロード部品です。ファイルメタデータ（ファイル名・サイズ・MIME タイプ）のみを扱い、File オブジェクト自体や実際のアップロード処理は保持しません（accept/max-files 等の検証は決定的な純粋関数で行いますが、実送信・保存は利用者側の責務です）。

fandhe-frontend-headless-ui の file_upload mod が提供する構造・アクセシビリティ（WAI-ARIA・キーボード操作）・表示状態（data-*）のみを持つ unstyled 部品です。Themes 版が備える見た目は持たず、anatomy・ARIA・data-* のみを提供します。CSS は利用者が当てます。

スタイル済みの表示例は File Upload を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Attachments

Drag files here or

photo.png
200.0 KB

Features

root/label/dropzone/trigger/item_group/item/item_name/item_size_text_node/item_delete_trigger/clear_trigger/hidden_input の 11 anatomy パーツで構成する（file_upload.rs:1-9）。
dropzone は role="button" + tabindex="0" でフォーカス可能にし、呼び出し側が attrs 経由で aria-label を与える（file_upload.rs:240-246）。
item_delete_trigger の aria-label は「Delete {name}」を動的に組み立てるが、既定エスケープを経由するため注入経路にはならない（file_upload.rs:304-308）。
本モジュールはファイルメタデータ（name/size_bytes/mime_type）のみを保持し、File オブジェクト自体・実アップロード処理は持たない（file_upload.rs:20-27）。

Anatomy

root
  label
  dropzone
    trigger
    hidden-input
  item-group
    item
      item-name
      item-size-text
      item-delete-trigger
  clear-trigger

API Reference

Arguments

Name	Type	Default	Description
root(disabled)	bool	false	root へ data-disabled を反映するかどうか。
dropzone(disabled, dragging)	bool, bool	false	role="button"/tabindex="0" 固定。dragging は data-dragging（wasm-full 側が DOM ローカルにトグルする想定、file_upload.rs:240-256）。
item_delete_trigger(name, disabled)	&str, bool		aria-label="Delete {name}" を動的に組み立てる（file_upload.rs:304-318）。
hidden_input(accept, multiple, disabled)	&str, bool, bool		<input type="file">。accept/multiple はネイティブ属性として反映される（file_upload.rs:340-363）。
attrs / children	Vec<(&str, &str)> / Vec<Node>		各パーツ共通の追加属性・子ノード（代表 1 行に集約）。

Examples

Single file dropzone

PDF のみを受け付ける単一ファイル選択の例です。

role="button" のドロップゾーンと単一ファイル選択 hidden_input の組み立て例です。

Resume

Drag & drop or

Accessibility

Keyboard Interactions

Key	Description
Space / Enter	dropzone は role="button" + tabindex="0" のためフォーカス可能で、trigger/item_delete_trigger/clear_trigger はいずれも <button> であるため、ブラウザ標準の活性化操作が働く（file_upload.rs:240-262, 308-326）。

WAI-ARIA

Attribute	Description
role="button"	dropzone パーツへ固定付与する（file_upload.rs:252）。
aria-label	item_delete_trigger パーツへ「Delete {name}」を動的に組み立てて付与する（file_upload.rs:304-318）。