Logo

Documentation v4.0.0

  • Home
  • Components
  • ImageInput
Light
Dark
System

Overview

ImageInput provides an image upload and preview component using Metronic's KTImageInput. It supports change, remove, and cancel actions, and stores the selected image as a Data URL in a hidden input.

Import

import {components} from 'metronic-extension';
const {ImageInput} = components;

Constructor

new ImageInput(element, options)
Parameter Type Description
element string | HTMLDivElement CSS selector string or HTMLDivElement.
options ImageInputOptions Configuration options for the image input.

ImageInputOptions

Property Type Default Description
default string - Path or Data URL of the default placeholder image.
current string - Path or Data URL of the current image.
hiddenEl HTMLInputElement - Hidden input to store the Data URL of the selected image.
width number 125 Width of the preview area in pixels.
height number 125 Height of the preview area in pixels.
readonly boolean false If true, the component is read-only.
cancelable boolean false If true, shows a Cancel Change (Undo) button.
accept string ".png,.jpg,.jpeg,.svg" Accepted file types for upload.

Methods

Method Return Description
onChange(handler) ImageInput Callback when the image changes. Receives the Data URL (or null if removed).
download() void Downloads the current image.
getInputElement() HTMLInputElement Returns the file input element.
getImage() string | null Returns the current image Data URL.
getHiddenElement() HTMLInputElement | null Returns the hidden input element.

Basic Example

Click the image area or the pencil icon to select a new image. Use the X button to remove it.
<div id="myImageInput"></div>
<input id="imageDataUrl" type="hidden">

import {components} from 'metronic-extension';
const {ImageInput} = components;

const imageInput = new ImageInput('#myImageInput', {
  default: '/img/blank-avatar.svg',
  hiddenEl: document.getElementById('imageDataUrl'),
  width: 150,
  height: 150,
});

imageInput.onChange(dataURL => {
  console.log('Image changed:', dataURL ? 'new image' : 'removed');
});

Read-only Example

A read-only image input that displays an image but does not allow changes.
<div id="myImageInput"></div>

import {components} from 'metronic-extension';
const {ImageInput} = components;

new ImageInput('#myImageInput', {
  default: '/img/blank-avatar.svg',
  current: '/img/user-avatar.png',
  readonly: true,
});
Previous Dropzone Next LineChart