File drop
Drag-and-drop or browse for files, form-associated.
<mm-file-drop name="manifest" label="dbt manifest" accept=".json" max-size="10 MB" required></mm-file-drop>
<mm-file-drop name="seeds" label="CSV seeds" accept=".csv,text/csv" max-size="10 MB" multiple></mm-file-drop>
Guidance
File drops take one or more files for upload, such as a dbt manifest.json or a CSV seed. A dashed
zone accepts dragged files and always offers a visible "browse" button that opens the native file
picker, so the control works fully from the keyboard. While files are dragged over it, the zone turns
sunken and its text changes, so the state never relies on colour alone.
Chosen files are listed with their name, their size in tabular figures and a remove button.
Files that are too large or of the wrong type are not added; a sentence names the file and the limit.
The element is form-associated: each file is appended to the form's FormData under name, required
blocks submission until a file is chosen, and form reset clears the list.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
accept | accept | string | '' | Accepted types, as for the native input: extensions (.json) and MIME types (text/csv, image/*). |
multiple | multiple | boolean | false | Allows more than one file. |
maxSize | max-size | number | 0 | Largest file allowed, in bytes or with a unit (10 MB, 500KB). Larger files are not added. |
loading | loading | boolean | false | Shows a spinner on each file and blocks changes while the files upload. |
files | File[] | [] | The chosen files. | |
value | File[] | The chosen files (alias of files). | ||
label | label | string | '' | Field label. Rendered above the control unless hide-label, and always the accessible name. |
help | help | string | '' | Help text under the control. |
error | error | string | '' | Error text: a sentence saying what to fix. Shows the crimson border, an icon and sets aria-invalid. |
hideLabel | hide-label | boolean | false | Hides the label visually; it stays the accessible name. |
optional | optional | boolean | false | Marks the field as optional, in words. |
name | name | string | '' | Name submitted with the form. |
disabled | disabled | boolean | false | Disables the control and excludes it from submission. |
required | required | boolean | false | Requires a value before the form submits. |
form | HTMLFormElement | null | |||
validity | ValidityState | |||
validationMessage | string | |||
willValidate | boolean | |||
isDisabled | boolean | True when disabled directly or by a disabled ancestor fieldset. |
Methods
| Method | Description |
|---|---|
browse() | Opens the native file picker. |
addFiles() | Validates and adds files as if they had been dropped. Returns the rejections. |
removeFile() | Removes one chosen file. |
formResetCallback() | Restore the initial value when the owning form resets. |
Events
| Event | Detail | Description |
|---|---|---|
mm-input | CustomEvent<File[]> | The chosen files changed; fired before mm-change. |
mm-change | CustomEvent<File[]> | The chosen files changed (added by drop or browse, or removed). |
mm-reject | CustomEvent<FileRejection[]> | One or more files were not added, with the reason for each. |
change | Event | Native change event, re-dispatched from the host when the files change. |
input | InputEvent |
CSS parts
| Part | Description |
|---|---|
zone | The dashed drop zone. |
browse | The browse button. |
list | The list of chosen files. |
file | One chosen file row. |
remove | A remove button. |
Examples
Every state of mm-file-drop in Storybook, with keyboard and screen reader tests.