#388
External trigger, no list
A FileUpload without its built-in list, opened from an Add files button in the section header; picked names are listed by the page.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "External trigger, no list" pattern (@codeatlasdev/ui demo #388, inputs/file-upload) in my app.
Call get_demo({ ids: ["#388"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Upload on pick with your own progress or list UI, and a header button that opens the same picker.
Keep these library parts, with the props and tokens the demo uses:
- Button, FileUpload from "@codeatlasdev/ui"
Behaviour to keep:
- `list={false}` and `multiple`: `onchange` receives only the files just picked and `files` is not kept
- `bind:this={upload}` and a header `Button` calling `upload?.open()`
- `data-testid="attachments-input"` is forwarded to the native file input
- The page keeps its own `names` list in `onchange`
- Wrapper has `max-width: 480px`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Button
@codeatlasdev/ui - FileUpload
@codeatlasdev/ui
How it is built
- `list={false}` and `multiple`: `onchange` receives only the files just picked and `files` is not kept
- `bind:this={upload}` and a header `Button` calling `upload?.open()`
- `data-testid="attachments-input"` is forwarded to the native file input
- The page keeps its own `names` list in `onchange`
- Wrapper has `max-width: 480px`
Related
Loading source.