Overview

Image Input is a component that allows for simple, lightweight image input fields.

Reference

Instance Methods
Name Description
public constructor() Create a new instance of the ImageInput class.
Parameters:
  • element: string|HTMLDivElement|JQuery
    HTMLDivElement selector, element, or JQuery object.
  • options.default?: string
    The path or Data URL of the image to display by default if no image is selected; default is none (undefined).
  • options.current?: string
    Path or Data URL of the current image, default is none (undefined).
  • options.name?: string
    Name attribute of the file input. The default is none (undefined).
  • options.hiddenEl?: HTMLInputElement
    A hidden element that sets the Data URL for the currently selected image. Default is none (undefined).
  • options.width?: number
    Width of the image preview area in pixels. Default is 125.
  • options.height?: number
    Height of the image preview area in pixels. Default is 125.
  • options.readonly?: boolean
    If true, read-only. Default is false (editable).
  • options.cancelable?: boolean
    If true, the Cancel Change (Undo) button is displayed. Default is false (cancel button is hidden).
  • options.accept?: string
    A comma-separated list of MIME types or file extensions (e.g., "image/*,application/pdf,.psd") for files that are allowed to be uploaded. Default is ".png,.jpg,.jpeg,.svg".
  • options.language?: Record<string, string>
    Strings used in the user interface.
    • change?: string
      Tooltip for the change button. Default is "Change".
    • remove?: string
      Delete button tooltip. Default is "Delete".
    • cancel?: string
      Tooltip for the Cancel Change button. Default is "Cancel and undo changes". 
                    import {components} from 'metronic-extension';

// Initialize the component and set up event listeners.
const imageInput = new components.ImageInput(document.getElementById('myImageInput'), {
  default: 'img/avatar1.svg',
  current: 'img/avatar2.png',
  width: 125,
  height: 125,
  hiddenEl: document.getElementById('myImageDataURL'),
  language: {
    change: 'Change this image',
    remove: 'Delete this image',
    cancel: 'Cancel changes to this image'
  }
});
public onChange() Sets the callback function that will be called when an image is modified. The callback function receives the Data URL of the image.
Parameters:
  • handler: (dataURL: string|null) => void
    Callback function.
Return:
  • ImageInput
                    // Set callbacks for image changes.
imageInput.onChange(dataURL => {
  alert('Changed image');
});
public download() Downloading the image under selection.
public getInputElement() Get input element.
Return:
  • HTMLInputElement Input Element.
public getImage() Get Data URL of selected image.
Return:
  • string|null Data URL.
public getHiddenElement() Get the hidden element that contains the Data URL of the selected image.
Return:
  • HTMLInputElement|null Hidden Element.

Basic 

              <!--begin::ImageInput-->
<div id="basicImageInput"></div>
<!--end::ImageInput-->
<!--begin::Image data URL-->
<input id="basicImageDataURL" type="hidden">
<!--end::Image data URL-->
            
              import {components} from 'metronic-extension';

// Initialize the component and set up event listeners.
const basicImageInput = new components.ImageInput(document.getElementById('basicImageInput'), {
  default: 'img/avatar1.svg',
  current: 'img/avatar2.png',
  width: 125,
  height: 125,
  hiddenEl: document.getElementById('basicImageDataURL'),
  language: {
    change: 'Change this image',
    remove: 'Delete this image',
    cancel: 'Cancel changes to this image'
  }
});

// Set callbacks for image changes.
basicImageInput.onChange(dataURL => {
  alert('Changed image');
});

Read-only 

              <!--begin::ImageInput-->
<div id="readonlyImageInput"></div>
<!--end::ImageInput-->
            
              import {components} from 'metronic-extension';

// Initialize the component and set up event listeners.
const readonlyImageInput = new components.ImageInput(document.getElementById('readonlyImageInput'), {
  current: 'img/avatar3.png',
  readonly: true,
});