e8-form-file
Updated on Sep 18, 2025 24 minutes to readA form control for uploading, downloading, and clearing files.
It supports drag-and-drop uploads, confirmation dialogs, tooltips, and client-side image manipulation (resize, format conversion, compression).
Overview
The <e8-form-file> component provides an interface for selecting and managing files in E8 applications.
It can handle uploads via file picker or drag-and-drop, optionally compress or resize images before upload,
and trigger user-defined events when files change.
<e8-form-file
v-model="vars.avatar"
owner-script-alias="lstClients"
attr-script-alias="avatar"
label="Profile Image"
accept="image/*"
save-option-width="800"
save-option-height="800"
save-option-format="WEBP"
save-option-compress="80"
></e8-form-file>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| accept | Comma-separated list of accepted MIME types or extensions (e.g. "image/*, .pdf"). | string | — |
| attr-script-alias | Alias for the attribute script used in automation or scripting contexts. | E8ScriptAlias | — |
| deletion-confirmation | Enables confirmation dialog before file deletion. | boolean | 'true' |
| label | Text displayed next to the file input; set to false to hide label. | string | boolean | — |
| max-image-size | Maximum allowed image size (in KB). If exceeded, the image is resized on the server. | number | string | — |
| owner-script-alias | Alias of the script owning this component. | E8ScriptAlias | — |
| placeholder | Placeholder text shown when no file is selected. | string | — |
| readonly | Makes the input read-only (disables user file selection). | boolean | false |
| save-option-compress | Image compression level (0–1 or 0–100). | number | 100 |
| save-option-format | Output image format. | E8FileManipulationImageFormats | — |
| save-option-height | Target height for image resizing. | number | — |
| save-option-width | Target width for image resizing. | number | — |
| size | Size of the control. | E8ElementSizes | 'default' |
| tooltip | Tooltip text shown on hover. | string | — |
| v-model | Bound value representing the selected file or its identifier. | E8File | — |
| visible | Controls the visibility of the file input. | boolean | true |
Slots
| Slot | Description |
|---|---|
| append | Custom content rendered after the select input. |
| label | Custom label slot. Provides { label, value } as slot props. |
| prepend | Custom content rendered before the select input. |
Events
| Event Prop | Description |
|---|---|
| on-change | Triggered when the selected file changes. |