# xpl-file-upload



<!-- Auto Generated Below -->


## Overview

`xpl-input-file` is a component that allows users to upload files.

## Properties

| Property              | Attribute                | Description                                                                                                                                                                | Type      | Default     |
| --------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
| `_id`                 | `_id`                    | Because `id` is a reserved HTMLElement attribute, we prefix it with an underscore here so that it doesn't get automatically applied to the outer container.                | `string`  | `undefined` |
| `accept`              | `accept`                 | The accepted file types for the file input. Corresponds to the `accept` attribute on the input element. Example: 'image/*' for all image types, '.pdf' for PDF files, etc. | `string`  | `''`        |
| `disabled`            | `disabled`               | Whether the field is disabled                                                                                                                                              | `boolean` | `undefined` |
| `hideAcceptText`      | `hide-accept-text`       | Hides the "Accept" text that indicates the accepted file types                                                                                                             | `boolean` | `false`     |
| `hideFileNames`       | `hide-file-names`        | Hides the file names in the file upload component                                                                                                                          | `boolean` | `false`     |
| `hideTriggerOnSelect` | `hide-trigger-on-select` | Hides the trigger element when a file is selected.                                                                                                                         | `boolean` | `false`     |
| `multiple`            | `multiple`               | Whether the user can select multiple files at once. Corresponds to the `multiple` attribute on the input element.                                                          | `boolean` | `false`     |
| `name`                | `name`                   | Most inputs are used in forms, and should have a `name` associated with the input for handling form data.                                                                  | `string`  | `undefined` |


## Events

| Event         | Description                                                                           | Type                                            |
| ------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------- |
| `inputChange` | Event emitted when a file is selected. The event detail contains the FileList object. | `CustomEvent<{ type: string; value: File[]; }>` |


## Methods

### `removeFileByIndex(fileIndex: number) => Promise<void>`

Removes a file from the selected files by its index.

#### Parameters

| Name        | Type     | Description                      |
| ----------- | -------- | -------------------------------- |
| `fileIndex` | `number` | The index of the file to remove. |

#### Returns

Type: `Promise<void>`




## Slots

| Slot        | Description                                                       |
| ----------- | ----------------------------------------------------------------- |
| `"trigger"` | The element that, when clicked, will open the file select dialog. |


## Dependencies

### Used by

 - [xpl-input](..)

### Depends on

- [xpl-icon](../../xpl-icon)

### Graph
```mermaid
graph TD;
  xpl-input-file --> xpl-icon
  xpl-input --> xpl-input-file
  style xpl-input-file fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*