e8-form-image
Updated on Sep 18, 2025 3 minutes to readA single image upload and preview component with optional image manipulation and management.
Overview
e8-form-image allows users to upload, view, download, edit, or remove a single image.
It supports drag-and-drop and manual file selection, thumbnail previews, and configurable image manipulation options such as resizing, format conversion, and compression.
<e8-form-image
v-model="vars.avatar"
label="Profile Picture"
tooltip="Upload your avatar"
owner-script-alias="user"
attr-script-alias="avatar"
group="userImages"
:thumbnail-size="120"
:keep-aspect-ratio="true"
:save-option-width="800"
:save-option-height="600"
save-option-format="JPEG"
:save-option-compress="80"
:max-image-size="2048"
></e8-form-image>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| alt | Alt text for the image. | string | '' |
| attr-script-alias | Attribute alias for resolving the upload URL. | E8ScriptAlias | — |
| deletion-confirmation | Enables confirmation prompt before image removal. | boolean | true |
| downloading-disabled | Disables image download. | boolean | false |
| editing-disabled | Disables image editing. | boolean | false |
| group | Group name for image gallery. | string | '' |
| keep-aspect-ratio | Maintains original image aspect ratio when resizing. | boolean | false |
| label | Custom label text; set to false to hide label. | string | boolean | — |
| max-image-size | Maximum image size (in KB). | number | string | — |
| owner-script-alias | Owner alias for resolving the upload URL. | E8ScriptAlias | — |
| readonly | Disables upload, edit, and delete actions. | boolean | false |
| removing-disabled | Disables image removal. | boolean | false |
| save-option-compress | Compression level (0–100) for image upload. | number | 100 |
| save-option-format | Output image format. | E8FileManipulationImageFormats | — |
| save-option-height | Target height in pixels for image uploads. | number | — |
| save-option-width | Target width in pixels for image uploads. | number | — |
| thumbnail-size | Size of the thumbnail preview in pixels. | number | 80 |
| tooltip | Tooltip text displayed below the input. | string | — |
| v-model | Two-way bound image file identifier. | string | — |
| viewing-disabled | Disables image preview. | boolean | false |
Slots
| Slot | Description |
|---|---|
| label | Custom label slot. Provides { label, value } as slot props. |
Events
| Event | Description |
|---|---|
| on-change | Emitted when the image value changes. |