File Upload
Material Design 3-styled file upload web component (lit-material-file-upload) — drag-and-drop or click-to-browse, single or multiple files.
- 2.6 KB gzipped
- @lit-material/file-upload 0.0.3
- Renders on the server
Example
File Upload
Drag-and-drop or click-to-browse file picking — a single file, or several with multiple.
<lit-material-file-upload></lit-material-file-upload>
Custom label + accept filter
Install
npm install @lit-material/file-upload @lit-material/tokensimport "@lit-material/file-upload";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-file-upload>
A drag-and-drop (or click-to-browse) file picker, for a single file or
(with multiple) several — mirroring the native <input type="file"
multiple> attribute rather than being two separate components for the
two cases, the same way a native file input handles both with one
element. The actual picking is a real <input type="file">, visually
hidden but still in the tab order and keyboard-operable (Enter/Space
opens the native picker) via the <label> wrapping it — no custom
keyboard handling needed for that part at all.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
multiple | multiple | boolean | false | |
accept | accept | string | "" | |
disabled | disabled | boolean | false | |
label | label | string | "" | |
name | name | string | "" | |
files | property only | File[] | none | The currently selected files. Assign to replace the selection programmatically. |
Events
| Event | Description |
|---|---|
change | Fires whenever the file selection changes (add or remove). |
Slots
| Slot | Description |
|---|---|
| default | Overrides the dropzone's instructions text. |
CSS parts
| Part | Description |
|---|---|
upload | The outer container (also the drop target). |
dropzone | The clickable/draggable label surface. |
input | The native <input type="file">. |
instructions | The instructions text. |
file-list | The <ul> of selected files. Only rendered once at least one file is selected. |
file-row | One file's row. |
file-name | A file row's name. |
file-size | A file row's formatted size. |
remove | A file row's remove button. |