---
metaTitle: File component | AwesCode UI
meta:
  - name: description
    content: The <AwFile /> component is used to render File input - UI Vue component for AwesCode UI.
title: File
---

# File

**Category:** Atom | **Import:** Global

The `AwFile` component is a wrapper around the native file input element that emits files as an array.

## Overview

`AwFile` provides a styled file input wrapper that handles file selection and emits the selected files as an array. It automatically resets the input after selection.

## Usage

### Basic Example

```markup
<AwFile @input="handleFiles">
    <AwButton>Select Files</AwButton>
</AwFile>
```

### With Custom Styling

```markup
<AwFile 
    accept="image/*" 
    multiple 
    @input="handleFiles"
    class="custom-file-input"
>
    <AwButton icon="awesio/upload">Upload Images</AwButton>
</AwFile>
```

## API

### Props

All standard HTML file input attributes are supported via `$attrs` (e.g., `accept`, `multiple`, `disabled`).

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Custom trigger element (button, icon, etc.) | - | - |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| input | `File[]` | Emitted when files are selected, provides array of File objects |

## Related Components

- `AwUploader` - Full-featured file upload component
- `AwImageUpload` - Image upload component
- `AwButton` - Button component for triggers

## Notes

- **Import Method:** Global - Available as atom component
- The native file input is hidden - use the default slot to provide a custom trigger
- Files are emitted as an array, even for single file selection
- Input is automatically reset after file selection
- All standard file input attributes are passed through via `$attrs`