# `m-file-uploader`

A file uploader allows users to upload one or multiple files by either dragging and dropping files into a dedicated area or selecting them manually through their local folders. It provides real-time feedback on upload progress and file status, including file name, size, and success or error indicators. File uploaders are commonly used in forms, content management systems, and document submission processes to facilitate seamless file handling.

## Props

| Name | Description | Type | Default |
|------|-------------|------|---------|
| `files*` | Model binding for the selected files (`NormalizedFile`) | `NormalizedFile[]` | `$bindable()` |
| `accept` | File types allowed by the uploader. | `HTMLInputElement['accept']` |   |
| `multiple` | Enables selecting multiple files at once. | `boolean` |   |
| `allowedextensions` | File extensions to validate. | `string[]` |   |
| `maxsize` | Maximum file size allowed (in bytes). | `number` |   |
| `rules` | Custom validation rules applied to each file. | `((file: NormalizedFile) => boolean)[]` |   |
| `format` | Layout format of the item. | `'inline'` `'stacked'` | `inline` |
| `errormessage` | Custom error message for the file. | `string` |   |
| `deletebuttonlabel` | Label for the delete button. | `string` |   |
| `information` | Optional informational text displayed under the file name. | `string` |   |
| `hasdragdrop` | Enables drag & drop functionality. | `boolean` | `true` |
| `showfileslist` | Controls the display of the uploaded files list. | `boolean` | `true` |
| `disabled` | Disables the whole component. | `boolean` |   |
| `title` | Main drag & drop title. | `string` | `Drag & drop` |
| `subtitle` | Subtitle used in the drag & drop area. | `string` | `or` |
| `uploadbuttonlabel` | Label of the upload button. | `string` | `Upload file(s)` |
| `onvalidation` | Callback to call when files validation is updated. | `(validationState: FilesValidationState) => void` |   |
| `onfilesupdate` | Callback to call when files are updates. | `(files: NormalizedFile[]) => void` |   |

## Slots

| Name | Description |
|------|-------------|
| `name` | Use this slot to display a custom file name. |
| `information` | Use this slot to display a custom information content. |
| `errorMessage` | Use this slot to display a custom error message. |

## Events

| Name | Description | Type |
|------|------|-------------|
| `files-update` | Emits when files list changes. | `CustomEvent<NormalizedFile[]>` |
| `validation` | Emits files validation when files list changes. | `CustomEvent<FilesValidationState>` |

