Component: Base64EncodedImageField

A field for uploading and displaying base64-encoded images with drag & drop support.

import Base64EncodedImageField from '@nhtio/vuetify-fields/components/fields/base64_encoded_image'

Examples

<Base64EncodedImageField v-model="imageData" />

<!-- Restrict to SVG files only -->
<Base64EncodedImageField
  v-model="svgData"
  :accepted-types="['svg']"
  openFilePickerLabel="SVG Upload"
/>

Result

Reference

Props

Name	Type	Default	Required
appendIcon	any | undefined	undefined
The icon to append to the field.
aspectRatio	string | number | undefined	undefined
The aspect ratio for the image display area.
density	string	"default"
The density of the input field.
disabled	boolean	false
Whether the field is disabled.
clearable	boolean	false
Whether to show a clear button when there's a value.
error	boolean	false
Whether the field is in an error state.
errorMessages	string | string[]	() => []
Error messages to display below the field.
focused	boolean	false
Whether the field is focused.
height	string | number | undefined	undefined
The height of the image display area.
hideDetails	boolean	false
Whether to hide the details section (hint, error messages).
hideSpinButtons	boolean	false
Whether to hide spin buttons on number inputs.
hint	string | undefined	undefined
Hint text to display below the field.
id	string | undefined	undefined
The HTML id attribute for the field.
label	string | undefined	undefined
The label text for the field.
loading	boolean	false
Whether to show a loading indicator.
maxErrors	string | number	1
Maximum number of error messages to display.
maxWidth	string | number | undefined	undefined
Maximum width of the image display area.
maxHeight	string | number | undefined	undefined
Maximum height of the image display area.
messages	string | string[]	() => []
Messages to display below the field.
minWidth	string | number | undefined	undefined
Minimum width of the image display area.
minHeight	string | number | undefined	undefined
Minimum height of the image display area.
modelValue	string | null | undefined	undefined
The current base64-encoded image value.
name	string | undefined	undefined
The HTML name attribute for the field.
persistentHint	boolean	false
Whether to always show the hint text.
prependIcon	any | undefined	undefined
The icon to prepend to the field.
readonly	boolean	false
Whether the field is readonly.
rules	any[] | undefined	undefined
Validation rules for the field.
theme	string | undefined	undefined
The theme to apply to the field.
validateOn	| "eager" | "lazy" | "blur" | "input" | "submit" | "invalid-input" | "blur lazy" | "input lazy" | "submit lazy" | "invalid-input lazy" | "blur eager" | "input eager" | "submit eager" | "invalid-input eager" | "lazy blur" | "lazy input" | "lazy submit" | "lazy invalid-input" | "eager blur" | "eager input" | "eager submit" | "eager invalid-input" | undefined	undefined
When to trigger validation.
validationValue	string | undefined	undefined
The value to use for validation.
variant	"outlined"	"outlined"
The field variant style.
width	string | number | undefined	undefined
The width of the image display area.
onChange	() => void	undefined
Callback function called when the value changes.
onFocus	() => void	undefined
Callback function called when the field is focused.
onBlur	() => void	undefined
Callback function called when the field loses focus.
onInput	() => void	undefined
Callback function called on input events.
openFilePickerLabel	string	"Open File Picker"
The label text for the file picker button.
acceptedTypes	string[]	() => []
Array of accepted image file types (e.g., ['svg', 'png', 'jpg']). Empty array allows all image types.

Events

Name	Type
update:modelValue	(val: string | null) => void
Emitted when the value is changed.
Properties: Name Type Description string ["val"] The current base64-encoded image value.
update:model-value	(val: string | null) => void
Emitted when the value is changed.
Properties: Name Type Description string ["val"] The current base64-encoded image value.
update	(val: string | null) => void
Emitted when the value is changed.
Properties: Name Type Description string ["val"] The current base64-encoded image value.