文件输入 · FileInput

通过文件选择控件读取用户主动选择的本地文件；预览不向服务器上传。

安装与前置条件

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见开始使用。

示例与使用方式

• 文件输入 · 综合展示 1：首先体验这个示例，再查看代码理解组件的组合方式。
• 文件输入 · 基础用法 2：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。

API 与上游详细参考

优先使用 0.7.1 官方中文说明；上游尚未提供中文的条目保留英文。属性名、类型及默认值保持原生 API，不把示例状态名称当成组件属性。

File Input

FileInput provides file upload with optional drag-and-drop support. Use it for single or multiple file selection with built-in validation for file type, size, and count. Pair with validation status for upload feedback.

使用建议

• Always specify an accept prop to guide users toward valid file types.
• Use maxSize and maxFiles to prevent oversized uploads.
• Add a description to communicate constraints.
• 避免：Don't use FileInput for directory uploads.
• 避免：Don't use mode='input' unless space is constrained; dropzone mode provides a better experience.
• 避免：Don't wrap a disabled FileInput in Tooltip to explain the disabled state; use the disabledMessage prop instead.

主题 API

{
  "targets": [
    {
      "className": "astryx-file-input",
      "visualProps": [
        "mode",
        "status"
      ]
    },
    {
      "className": "astryx-file-input-icon",
      "visualProps": [
        "mode"
      ]
    }
  ]
}

组件结构

• Label: Text identifying the field.
• Drop zone: Clickable area for file selection.
• Placeholder: Hint text when no files selected.
• File name display: Shows selected file names.
• Clear button: Removes selected files.