@maggioli-design-system/mds-input-upload

mds-input-upload

Properties

Property	Attribute	Description	Type	Default
accept	accept	Defines the file types the file input should accept	string	''
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

Events

Event	Description	Type
mdsInputUploadChange	Emits when the component files are changed	CustomEvent<FileList | null>

Methods

getFiles() => Promise<FileList | null>

Returns a promise of files uploaded as Filelist or null if there's none

Returns

Type: Promise<FileList | null>

getFilesError() => Promise<FileError[] | null>

Returns a promise of files error or null if there's none

Returns

Type: Promise<FileError[] | null>

updateLang() => Promise<void>

Returns

Type: Promise<void>

CSS Custom Properties

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.

Dependencies

Depends on

• mds-text
• mds-button
• mds-progress
• mds-tab
• mds-tab-item
• mds-file-preview

Graph

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