UploadField

UploadField(__namedParameters): Element

Defined in: packages/ui/src/fields/upload-field.tsx:168

Headless multi-file upload field for cfast forms.

UploadField is a controlled, form-friendly component that uploads files through @cfast/storage’s opinionated POST /uploads/:filetype route and surfaces the resulting R2 keys via the value / onChange pair.

It is intentionally headless: the markup is plain HTML so consumers can style it directly, and the Joy UI variant lives in @cfast/joy. The component handles:

• Drag-and-drop and click-to-browse selection.
• Per-file upload progress (via the configurable UploadFieldProps.uploader).
• Per-file inline error reporting (server, network, or validation).
• accept / maxSize / maxFiles enforcement before bytes leave the browser.
• Controlled value round-tripping for react-hook-form and other state libs.

Parameters

__namedParameters

UploadFieldProps

Returns

Element

Example

<UploadField
  filetype="productImages"
  basePath="/uploads"
  multiple
  maxFiles={10}
  accept="image/*"
  value={imageKeys}
  onChange={setImageKeys}
  onError={(file) => console.warn(file.error)}
/>