Magma components are web components: custom elements you write like HTML tags, with any framework or without one. Props configure them, events tell you what happened, methods are functions you call on the element and slots take the content you put inside it.

Props

Set a prop as an HTML attribute in the markup, or as a property from JavaScript. The Attribute column gives the name of the attribute, a dash when it is the same as the property; props without one, such as arrays and functions, are set from JavaScript only. To turn a boolean attribute off, remove it: never write disabled="false".accept - stringDefines the file types the file input should accept

disabled - boolean | undefinedfalseDisables 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.

initialValueFileList | File[] | undefinedSpecifies initial files uploaded

maxFileSizemax-file-sizenumber20Specifies the max size of a single file that can be uploaded in MB

maxFilesmax-filesnumber1Specifies the max number of files that can be uploaded

name - string | undefinedThe name the accepted files are submitted under with the form, one entry per file

sort - date | status | undefinedSpecifies 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

Events

mdsInputUploadChangeFileList | nullEmits when the component files are changed

Methods

getFilesgetFiles() => Promise<FileList | null>Returns a promise of the accepted files as a FileList, empty if there’s none

getFilesErrorgetFilesError() => Promise<FileError[] | null>Returns a promise of files error or null if there’s none

resetreset() => Promise<void>Reset component’s files