File Upload — cinder playground

Overview

Accessible file picker and drag-and-drop surface that validates dropped files, announces results, and can render consumer-driven upload progress rows.

Usage

<script lang="ts">
  import FileUpload from '@lostgradient/cinder/file-upload';
  import FormField from '@lostgradient/cinder/form-field';

  let files = $state([]);
</script>

<FormField id="resume" label="Resume" description="PDF up to 5 MB">
  <FileUpload
    id="resume"
    accept=".pdf"
    maxSize={5 * 1024 * 1024}
    onchange={(accepted) => {
      files = accepted.map((file) => ({
        id: crypto.randomUUID(),
        file,
        status: 'success',
      }));
    }}
    {files}
  />
</FormField>

Use triggerLabel when the picker action needs more specific text, such as directory or import flows. Native input attributes still pass through to the real file input, so directory selection can use webkitdirectory:

<FileUpload id="history" triggerLabel="Choose directory" multiple webkitdirectory />

Live preview

When to use

Use when

Collecting one or more files while keeping the native picker available for keyboard and assistive-technology users.
Showing per-file upload progress or rejection errors below a prominent dropzone surface.

Avoid when

You only need a hidden native file input with no custom UI.

Examples

Basic file upload

Drag-and-drop file picker with acceptance and rejection feedback.

Props

Props for file-upload
Name	Type	Default	Required	Description
`id`	`text`			Stable id for the native file input. Required when composing with `FormField`.
`accept`	`text`			Native file accept filter.
`multiple`	`boolean`	`false`		Allow more than one file. Default `false`.
`maxSize`	`number`			Maximum allowed file size in bytes.
`disabled`	`boolean`			Disables the file picker and drag-and-drop surface.
`required`	`unknown`		req
`name`	`text`			Native input name used for form submission.
`triggerLabel`	`text`	`'Choose files'`		Visible text for the picker trigger button. Default `Choose files`.
`files`	`FileUploadEntry[]`			Consumer-driven file rows, including upload progress and error states.
`idle`	`snippet`			Replaces the default resting-state dropzone body.
`dragActive`	`snippet`			Replaces the default drag-active dropzone body.
`fileList`	`snippet`			Replaces the default file-list renderer. Receives the resolved rows.
`onchange`	`(files: File[]) => void`			Fires with accepted files after local validation passes.
`onReject`	`(files: RejectedFile[]) => void`			Fires with rejected files and reasons after local validation runs.