# MFileUploaderItem

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 |
| --- | --- | --- | --- | 
| `file*` | Represents the file to be displayed in the file uploader item. | `NormalizedFile` | - |
| `format` | Layout format of the item. | `"inline"` `"stacked"` | `"inline"` |
| `valid` | Indicates if the file is valid according to the uploader's validation rules. | `boolean` | - |
| `errorMessage` | Custom error message for the file. | `string` | - |
| `deleteButtonLabel` | Label for the delete button. | `string` | `"Delete"` |
| `information` | Optional informational text displayed under the file name. | `string` | - |

## Slots

| Name | Description |
| --- | --- |
| `name` | Slot for customizing the file name display.
Receives `{ file: { name: string; size?: number;} }` as slot props. |
| `information` | Slot for displaying additional file information. |
| `errorMessage` | Slot for providing a custom error message display. |

## Events

| Name | Description | Type |
| --- | --- | --- |
| `delete` | - | `[]` |

## Dependencies

### Depends on

- [MButton](../button)
- [MDivider](../divider)

### Graph

```mermaid
graph TD;
  MFileUploaderItem --> MButton
  MFileUploaderItem --> MDivider
style MFileUploaderItem fill:#008240,stroke:#333,stroke-width:4px
```

### Used By

- [MFileUploader](../fileuploader)

### Graph

```mermaid
graph TD;
  MFileUploader --> MFileUploaderItem
style MFileUploaderItem fill:#008240,stroke:#333,stroke-width:4px
```