File Upload

fandhe-frontend-pre-styled-ui の file_upload mod が提供するスタイル済み File Upload 部品です。

Demo

ファイルメタデータ（name/size/mime type）のみを扱い、File オブジェクト自体は headless 層で保持しません。実 File API 接触は wasm-full 側の配線層に隔離されています。

Attachments

report.pdf
200.0 KB
oversized.zip
50.0 MB

Disabled

locked.txt
1.0 KB

Dragging

Features

headless-ui の file_upload::root へ委譲し、size variant クラスのみを付与する。
FileUploadProps（disabled/readonly/invalid/required）と dragging（data-dragging の DOM ローカル状態）を引数で受け取り、headless 層へそのまま委譲する（イシュー #1609 の headless 側破壊的変更への追随）。
item の data-invalid は headless 層が出力しないため（旧 checkbox_group の判断。#1603 で checkbox_group 側は headless 出力へ移行済み）、利用者が item の attrs へ ("data-invalid", "") を直接付与することで border-color を danger 色化できる。
item は border と border-color の transition（data-invalid 用）を持つ。item-delete-trigger は hover（@media (hover: hover)）を持つが、item が既に opacity 0.5 で dim 済みのため disabled は cursor: not-allowed のみに留め、opacity の三重適用（root × item × item-delete-trigger）を避ける。

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
`size`	`Size`	`Size::Md`	サイズ variant。
`props`	`&FileUploadProps`	—	disabled/readonly/invalid/required の状態束（headless 層へそのまま委譲）。
`dragging`	`bool`	`false`	root の `data-dragging`（wasm-full 側が DOM ローカルにトグルする想定）。
`attrs`	`Vec<(&str, &str)>`	—	root パーツへ合成する追加属性。
`children`	`Vec<Node>`	—	root 配下の子ノード（ドロップゾーン・トリガー等）。

Data Attributes

Part	Attribute	Observed Values
`clear-trigger`	`data-disabled`	（値なし）
`dropzone`	`data-disabled`	（値なし）
`dropzone`	`data-dragging`	（値なし）
`hidden-input`	`data-disabled`	（値なし）
`item`	`data-disabled`	（値なし）
`item`	`data-invalid`	（値なし）
`item`	`data-type`	`accepted`
`item-delete-trigger`	`data-disabled`	（値なし）
`item-delete-trigger`	`data-type`	`accepted`
`item-group`	`data-disabled`	（値なし）
`item-group`	`data-type`	`accepted`
`item-name`	`data-disabled`	（値なし）
`item-name`	`data-type`	`accepted`
`item-size-text`	`data-disabled`	（値なし）
`item-size-text`	`data-type`	`accepted`
`label`	`data-disabled`	（値なし）
`root`	`data-disabled`	（値なし）
`root`	`data-dragging`	（値なし）
`trigger`	`data-disabled`	（値なし）

CSS Variables

Variable	Default
`--fandhe-file-upload-dropzone-padding`	`var(--fandhe-space-6)`
`--fandhe-file-upload-font-size`	`var(--fandhe-font-font-size-sm)`