---
metaTitle: ImageUpload component | AwesCode UI
meta:
  - name: description
    content: The <AwImageUpload /> component provides image upload with preview - UI Vue component for AwesCode UI.
title: ImageUpload
---

# AwImageUpload

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

The `AwImageUpload` component provides image upload functionality with preview, validation, and optional cropping.

## Usage

```markup
<AwImageUpload
  v-model="image"
  name="avatar"
  label="Profile Picture"
  accept="image/*"
  :max-size="2097152"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| value | Uploaded image (v-model) | `File\|String` | `false` | `null` |
| name | Input name | `String` | `false` | `''` |
| label | Input label | `String` | `false` | `''` |
| accept | Accepted file types | `String` | `false` | `'image/*'` |
| maxSize | Max file size in bytes | `Number` | `false` | `5242880` |
| withCropper | Enable image cropping | `Boolean` | `false` | `false` |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| input | `file` | Image selected (v-model) |

## Related Components

- [AwUploader](aw-uploader.md) - General file uploader
- [AwCropper](aw-cropper.md) - Image cropper

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as organism
- Shows image preview after selection
- Validates file size and type
- Optional cropping before upload