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

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

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

@maggioli-design-system/mds-button @maggioli-design-system/mds-entity @maggioli-design-system/mds-file-preview @maggioli-design-system/mds-progress @maggioli-design-system/mds-text @maggioli-design-system/styles @stencil/core mime

10 months ago

11 months ago

9 months ago

9 months ago

7 months ago