mds-input-upload is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
npm install @maggioli-design-system/mds-input-upload| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| accept | accept | Defines the file types the file input should accept | string | '' |
| initialValue | -- | | FileList \| File[] \| undefined | undefined |
| maxFileSize | max-file-size | Specifies the max size of a single file that can be uploaded in MB | number | 20 |
| maxFiles | max-files | Specifies the max number of files that can be uploaded | number | 1 |
| sort | sort | Specifies if the component should show a sort widget by status or date of upload, if not defined let user choose | "date" \| "status" \| undefined | undefined |
| Event | Description | Type |
| ---------------------- | ------------------------------------------ | ------------------------------- |
| mdsInputUploadChange | Emits when the component files are changed | CustomEvent |
Returns a promise of files uploaded as Filelist or null if there's none
#### Returns
Type: Promise
Returns a promise of files error or null if there's none
#### Returns
Type: Promise
Reset component's files
#### Returns
Type: Promise
#### Returns
Type: Promise
| Name | Description |
| ------------------------------------------------------- | ------------------------------------------------------------------------- |
| --mds-input-upload-drag-area-background-color | Sets the background-color of the drag area. |
| --mds-input-upload-drag-area-background-color-on-drag | Set the background color of the drag area when a file is dragged over it. |
| --mds-input-upload-drag-area-border | Sets the border of the drag area. |
| --mds-input-upload-drag-area-border-on-drag | Set the border of the drag area when a file is dragged over it. |
| --mds-input-upload-min-cols | Set the minimum number of columns for the file list. |
- mds-text
- mds-button
- mds-progress
- mds-tab
- mds-tab-item
- mds-file-preview
mermaid
graph TD;
mds-input-upload --> mds-text
mds-input-upload --> mds-button
mds-input-upload --> mds-progress
mds-input-upload --> mds-tab
mds-input-upload --> mds-tab-item
mds-input-upload --> mds-file-preview
mds-button --> mds-spinner
mds-button --> mds-icon
mds-button --> mds-text
mds-tab-item --> mds-button
mds-file-preview --> mds-button
mds-file-preview --> mds-img
mds-file-preview --> mds-icon
mds-file-preview --> mds-text
mds-file-preview --> mds-badge
mds-img --> mds-icon
mds-img --> mds-text
mds-img --> mds-button
mds-badge --> mds-text
style mds-input-upload fill:#f9f,stroke:#333,stroke-width:4px
``----------------------------------------------
Built with love @ Gruppo Maggioli from R&D Department