@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
59 lines (45 loc) • 2.62 kB
Markdown
# MFileUploader
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 |
| --- | --- | --- | --- |
| `modelValue*` | Model binding for the selected files (`NormalizedFile`) | `NormalizedFile[]` | - |
| `accept` | File types allowed by the uploader. | `string` | - |
| `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"` | - |
| `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)"` |
## Slots
| Name | Description |
| --- | --- |
| `name` | Slot for customizing the file name display.
Receives `NormalizedFile` as slot props. |
| `information` | Slot for displaying additional file information.
Receives `NormalizedFile` as slot props. |
| `errorMessage` | Slot for providing a custom error message display.
Receives:
`{ validationState: { size: boolean; extension: boolean; customValidation: boolean } }` |
## Events
| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | - | `[v: NormalizedFile[]]` |
| `validation` | - | `[validationState: FilesValidationState]` |
## Dependencies
### Depends on
- [MFileUploaderItem](../fileuploaderitem)
### Graph
```mermaid
graph TD;
MFileUploader --> MFileUploaderItem
style MFileUploader fill:#008240,stroke:#333,stroke-width:4px
```