FileList
The rows under a file picker: an icon for the kind, the name, the size, and a remove button.
Give an item a progress and the row grows a bar; give it an error and the row turns destructive and says why. FileInput renders one of these for you. Reach for it directly when the app is tracking an upload and needs to feed progress in per file:
<FileInput bind:files showList={false} />
<FileList items={uploads} onRemove={(i) => cancel(uploads[i])} />
Rows fade in as they arrive and slide up to close the gap when one leaves, so a removal reads as a removal rather than as a list that jumped.
Forms · keyboard contract
<script lang="ts">
import { FileList } from '@l4st/driftwood';
</script>
| Light | Dark |
|---|---|
 |
 |
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
items required |
FileItem[] |
— | The files, in the order they should read. |
onRemove |
(index: number) => void |
— | Called with the row's index. Omit for a list nobody can edit. |
removeLabel |
string |
'Remove' |
The remove button's accessible name; the file name is appended. |
class |
string |
— | Merged with the component's own classes, last — so yours win. |
Keyboard
| Key | Does |
|---|---|
| Enter / Space | remove the focused file |
Example
The markup behind the screenshot above, lifted from src/routes/shots/ — so it
compiles, and it is exactly what produced the image.
<FileList
items={chosen.map((file, i) => ({
file,
progress: i === 0 ? 62 : undefined,
done: i === 1
}))}
onRemove={() => {}}
/>
Notes
FileItem
type FileItem = {
/** The file itself. Name, size and type are read off it. */
file: File;
/** 0–100 while uploading; `null` for an unknown duration; omitted when idle. */
progress?: number | null;
/** Renders the row as failed, with this as the reason. */
error?: string;
/** Renders the row as finished. */
done?: boolean;
};
progress distinguishes three states, and the difference matters: absent is
a file sitting in a list nobody has started uploading, null is work of
unknown length (an indeterminate Progress), and a number is a
bar. A file that is done drops progress and sets done.
When to reach for it directly
FileInput renders one of these for you, with removal wired up —
that is the common case and you should not compose it yourself. Use FileList
on its own when the app is tracking an upload and needs to feed a progress or
an error in per file; pass showList={false} to the input so there is only
one list on screen.
Rows fade in as they arrive and slide up to close the gap when one leaves, so a
removal reads as a removal rather than as a list that jumped. Both respect
prefers-reduced-motion.
Forms · Field · Input · FileInput · Textarea · CodeEditor · Combobox · RadioGroup · NumberInput · InlineEdit · Label · Select · MultiSelect · DatePicker · TagsInput · Checkbox · Switch · Slider