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

# AwUploaderFiles

**Category:** Organism | **Import:** Dynamic

The `AwUploaderFiles` component displays a table of uploaded files with their progress status and remove buttons. It's a functional component designed to work with `AwUploader`.

## Overview

`AwUploaderFiles` provides a file list display with:
- File name display
- Upload progress indicator
- Remove file button
- Table layout
- Responsive design

## Usage

### Basic Example

```markup
<AwUploaderFiles
    :files="uploadedFiles"
    :remove-file="removeFile"
/>
```

### With AwUploader

```markup
<template>
    <div>
        <AwUploader
            url="/api/upload"
            @start="handleStart"
            @finish="handleFinish"
        />
        
        <AwUploaderFiles
            :files="files"
            :remove-file="removeFile"
        />
    </div>
</template>

<script>
export default {
    data() {
        return {
            files: []
        }
    },
    methods: {
        handleStart(fileData) {
            this.files.push(fileData)
        },
        handleFinish({ id, response }) {
            const file = this.files.find(f => f.id === id)
            if (file) {
                file.loaded = true
                file.response = response
            }
        },
        removeFile(id) {
            this.files = this.files.filter(f => f.id !== id)
        }
    }
}
</script>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| files | Array of file objects | `Array` | `false` | `[]` |
| removeFile | Function to remove a file | `Function` | `true` | - |

**File Object Format:**
```javascript
{
  id: 1,                    // Unique file ID
  name: 'document.pdf',     // File name
  progress: 50,             // Upload progress (0-100)
  loaded: false,            // Upload completed
  file: File                // File object
}
```

### Slots

This component does not have slots (functional component).

### Events

This component does not emit events (functional component).

## Related Components

- `AwUploader` - File upload component
- `AwTable` - Table component used internally
- `AwTableCol` - Table column component
- `AwButton` - Button component for remove action

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Component is functional (stateless) for optimal performance
- Only renders if `files.length > 0`
- Table shows: index, file name, progress/status, remove button
- Progress shows percentage while uploading, "Finished" when complete
- Remove button calls `removeFile(file.id)` function
- Table uses fixed layout (`table-fixed` class)
- Progress column is hidden on mobile (`hidden md:table-cell`)
- Component uses `AwTable` and `AwTableCol` for layout
- File index starts at 1 (displayed as `index + 1`)