> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# File Input

> InputFile.vue Component Documentation

The `InputFile.vue` component is a Vue.js component designed to work seamlessly with Inertia.js and Laravel forms. It provides an intuitive interface for file uploads, supports drag-and-drop functionality, and integrates with form objects for processing states and progress tracking.

***

## Features

<CardGroup cols={2}>
  <Card title="File Upload Support" icon="square-1">
    Allows for file uploads with customizable file type restrictions.
  </Card>

  <Card title="Drag-and-Drop" icon="square-2">
    Enables drag-and-drop functionality for a user-friendly experience.
  </Card>

  <Card title="Form Integration" icon="square-3">
    Works with Inertia.js/Laravel forms to manage processing states and upload progress.
  </Card>

  <Card title="Dynamic File List" icon="square-4">
    Displays a list of uploaded files with the ability to remove files.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```js theme={null}
import { InputFile } from '@robojuice/velure-ui';
```

```vue theme={null}
<InputFile
  label="Select File For Import"
  v-model="form.files"
  :form="form"
  accept="text/csv"
/>
```

***

## Props

<ParamField path="v-model" type="array" default="undefined">
  The list of files from the Inertia.js form object.
</ParamField>

<ParamField path="width" type="number | string" default="100">
  The width of the component as a percentage.
</ParamField>

<ParamField path="errors" type="string" default="null">
  Error message to display for validation errors.
</ParamField>

<ParamField path="label" type="string" default="undefined">
  The label displayed on the upload button.
</ParamField>

<ParamField path="multiple" type="boolean" default="false">
  Enables the selection of multiple files.
</ParamField>

<ParamField path="form" type="object" default="{}">
  The form object for managing processing states and progress tracking.
</ParamField>

<ParamField path="accept" type="string" default="'*'">
  The accepted file types (e.g., `text/csv`, `image/*`, etc.).
</ParamField>

***

## Example Use Cases

### Single File Upload

```vue theme={null}
<InputFile
  label="Upload a CSV"
  v-model="form.file"
  :form="form"
  accept="text/csv"
/>
```

### Multiple File Uploads

```vue theme={null}
<InputFile
  label="Upload Images"
  v-model="form.files"
  :form="form"
  multiple
  accept="image/*"
/>
```

***

## Notes

* **Drag-and-Drop Support**: Files can be dragged into the upload area to simplify the user experience.
* **Processing State**: The `form.processing` property disables input and shows a processing message during uploads.
* **Progress Tracking**: The `form.progress.percentage` property updates the progress bar dynamically.

For further customization, refer to the component's source code.