Input upload<mds-input-upload>Generato da @maggioli-design-system/magma@2.3.0dist/documentation.json. Incapsulamento: shadow.
Questa pagina è generata dai pacchetti Magma, documentati solo in inglese.
Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.
Proprietà
sortenumSpecifies the order the files start sorted by, status or date of upload, and shows the sort tabs that let the user change it; if not defined the tabs are hidden and the order is the user's last choice
disableddisabledbooleanDisables the component, like a disabled native file input: no file can be added, dropped or removed, and the files are left out of the form. A disabled <fieldset> around the component does the same.
acceptstringDefines the file types the file input should accept
namestringThe name the accepted files are submitted under with the form, one entry per file
maxFilesnumberSpecifies the max number of files that can be uploaded
maxFileSizenumberSpecifies the max size of a single file that can be uploaded in MB
Panoramica
The <mds-input-upload> web component is the Magma Design System file-upload control. It wraps a hidden native <input type="file"> in a drag-and-drop drop zone with progress, per-file previews, validation and optional sorting, exposing the selected files to a surrounding <form> through form association.
Semantic Behavior
Form association: Like a native <input type="file" multiple>, the form submits every accepted file under name, one entry per file, in the order they were added; rejected files are not submitted, and without name nothing is. Post the form as multipart/form-data to send the file contents. A form reset clears every selected file.Disabled fieldset: A disabled <fieldset> around the component disables it as disabled does, like a native control: no file can be added or removed and the files are left out of the form, until the fieldset is enabled.Validity reporting: Per-file errors are reported as native validity flags - too many files, oversize, or wrong type - and the joined messages become the validation message.Drag-and-drop: The drop zone reacts to drag events; on dragenter the prompt text swaps to a drag hint, restoring on dragleave or drop.Per-file validation: Each added file is checked against accept (MIME, wildcard MIME, or extension), maxFileSize, and maxFiles; valid files render as success previews, invalid ones render as error previews with a localized message and are excluded from the form value.Change event: mdsInputUploadChange fires with the current valid FileList (or null) on every add, cancel, or reset.Imperative API: Exposes getFiles(), getFilesError(), and reset() methods for host-driven control.Localization: All UI strings resolve against the host language (el / en / es / it).
Properties & Visual Configurations
accept declares the allowed file types as a comma-separated list of MIME types, wildcard MIME types (e.g. image/*), or extensions; it both filters the native picker and drives the human-readable extension hint shown to the user.maxFileSize caps the size of any single file in MB (default 20); files above it are rejected with a size error.maxFiles caps how many files may be uploaded (default 1) and enables multi-file selection when greater than one.disabled disables the component, like a disabled native file input: the picker and cancel buttons, the sort tabs and the delete action of the previews are disabled, a dropped file is refused, and the files are left out of the form. Code can still set the files through initialValue or clear them with reset().name is the name the accepted files are submitted under with the form.initialValue seeds the control with files already present, before or after the first render; reassigning it re-runs the add pipeline.sort controls whether the sort chooser is shown. When sort is set to 'date' or 'status', the files start in that order and the sort tab bar appears once more than one file is present; the user’s choice from the tab bar then stays in place as files are added, the highlighted tab is always the order applied, and the choice persists to localStorage. Changing sort applies the new order. When sort is omitted, no tab bar is shown and the last localStorage preference (defaulting to 'date') is applied silently.