Logo

Documentation v8.1.1

  • Forms
  • Image Input Exclusive
Preview Downloads Purchase
Light
Dark
System

Overview

Image input is an exclusive plugin of Metronic that enables a simple, user-friendly and lightweight image input field.

Usage

Image input's CSS and Javascript files are bundled in the global style and scripts bundles and are globally included in all pages:
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>

Initialization

  • Image input does not come with its own custom CSS and it uses global input controls and related elements.
  • Image input instances are automatically initialized through data-kt-image-input="true"HTML attribute on document ready event. However, some HTML markup is required to build the content and controls required. To initialize Image Input instance in Javascript remove data-kt-image-input="true"attribute and refer to KTImageInputclass constructor below.
  • The HTML markup comes in a few sections:
    • Main wrapper
    • Image preview wrapper
    • Edit button
    • Cancel button
    • Remove button
  • The image preview wrapper element is identified by the .image-input-wrappercss class.
  • The edit button is identified by the data-kt-image-input-action="change"attribute.
  • The cancel button is identified by the data-kt-image-input-action="cancel"attribute.
  • The remove button is identified by the data-kt-image-input-action="remove"attribute.
  • Please refer to our basic example below for a sample HTML markup.
  • Image input instances can also be controlled programmatically with Javascript. See below for more info.

Basic Example

Basic example of an empty image input:
<!--begin::Image input-->
 <div class="image-input image-input-empty" data-kt-image-input="true" style="background-image: url(/assets/media/svg/avatars/blank.svg)">
     <!--begin::Image preview wrapper-->
     <div class="image-input-wrapper w-125px h-125px"></div>
     <!--end::Image preview wrapper-->

     <!--begin::Edit button-->
     <label class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
        data-kt-image-input-action="change"
        data-bs-toggle="tooltip"
        data-bs-dismiss="click"
        title="Change avatar">
         <i class="bi bi-pencil-fill fs-7"></i>

         <!--begin::Inputs-->
         <input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
         <input type="hidden" name="avatar_remove" />
         <!--end::Inputs-->
     </label>
     <!--end::Edit button-->

     <!--begin::Cancel button-->
     <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
        data-kt-image-input-action="cancel"
        data-bs-toggle="tooltip"
        data-bs-dismiss="click"
        title="Cancel avatar">
         <i class="bi bi-x fs-2"></i>
     </span>
     <!--end::Cancel button-->

     <!--begin::Remove button-->
     <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
        data-kt-image-input-action="remove"
        data-bs-toggle="tooltip"
        data-bs-dismiss="click"
        title="Remove avatar">
         <i class="bi bi-x fs-2"></i>
     </span>
     <!--end::Remove button-->
 </div>
 <!--end::Image input-->

Outline Style

Sets the image preview wrapper with a bordered edge:
<!--begin::Image input-->
 <div class="image-input image-input-outline" data-kt-image-input="true" style="background-image: url(/assets/media/svg/avatars/blank.svg)">
     <!--begin::Image preview wrapper-->
     <div class="image-input-wrapper w-125px h-125px" style="background-image: url(/assets/media/avatars/300-1.jpg)"></div>
     <!--end::Image preview wrapper-->

     <!--begin::Edit button-->
     <label class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
        data-kt-image-input-action="change"
        data-bs-toggle="tooltip"
        data-bs-dismiss="click"
        title="Change avatar">
         <i class="bi bi-pencil-fill fs-7"></i>

         <!--begin::Inputs-->
         <input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
         <input type="hidden" name="avatar_remove" />
         <!--end::Inputs-->
     </label>
     <!--end::Edit button-->

     <!--begin::Cancel button-->
     <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
        data-kt-image-input-action="cancel"
        data-bs-toggle="tooltip"
        data-bs-dismiss="click"
        title="Cancel avatar">
         <i class="bi bi-x fs-2"></i>
     </span>
     <!--end::Cancel button-->

     <!--begin::Remove button-->
     <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
        data-kt-image-input-action="remove"
        data-bs-toggle="tooltip"
        data-bs-dismiss="click"
        title="Remove avatar">
         <i class="bi bi-x fs-2"></i>
     </span>
     <!--end::Remove button-->
 </div>
 <!--end::Image input-->

Circle Style

Circle edge example of an image input:
<!--begin::Image input-->
 <div class="image-input image-input-circle" data-kt-image-input="true" style="background-image: url(/assets/media/svg/avatars/blank.svg)">
     <!--begin::Image preview wrapper-->
     <div class="image-input-wrapper w-125px h-125px" style="background-image: url(/assets/media/avatars/300-20.jpg)"></div>
     <!--end::Image preview wrapper-->

     <!--begin::Edit button-->
     <label class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
        data-kt-image-input-action="change"
        data-bs-toggle="tooltip"
        data-bs-dismiss="click"
        title="Change avatar">
         <i class="bi bi-pencil-fill fs-7"></i>

         <!--begin::Inputs-->
         <input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
         <input type="hidden" name="avatar_remove" />
         <!--end::Inputs-->
     </label>
     <!--end::Edit button-->

     <!--begin::Cancel button-->
     <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
        data-kt-image-input-action="cancel"
        data-bs-toggle="tooltip"
        data-bs-dismiss="click"
        title="Cancel avatar">
         <i class="bi bi-x fs-2"></i>
     </span>
     <!--end::Cancel button-->

     <!--begin::Remove button-->
     <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
        data-kt-image-input-action="remove"
        data-bs-toggle="tooltip"
        data-bs-dismiss="click"
        title="Remove avatar">
         <i class="bi bi-x fs-2"></i>
     </span>
     <!--end::Remove button-->
 </div>
 <!--end::Image input-->

Markup Reference

Image input uses both CSS and HTML attributes to define the input configuration. The CSS classes below must be placed next to the main image-inputcss class within the main wrapper. Here are the references for each below
CSS classes references
Name Description
image-input Enables the image input component.
image-input-circle Sets the image preview wrapper with a circle edge.
image-input-outline Sets the image preview wrapper with a bordered edge.
Tip: The image-input-circleand image-input-outlineclasses can be used simultaneously.
HTML attribute references
Name Type Description
data-kt-image-input mandatory Accepts trueand falsevalues, when trueis set KTImageInputJavascript class automatically initializes the image input instance to apply the edit & remove logic.
data-kt-image-input-action mandatory
To be applied to each button type. Accepts either change, cancelor removevalues. This specifies the type of button it's assigned to.
Each button must be defined within the main wrapper of the image input.

Methods

All Image Input components are initialized automatically, however the following are the Image input's functionality methods for more control.
Name Description
Static Methods
createInstances(DOMString selector) Initializes Image Input instances by selector. Default value of selectoris [data-kt-image-input]. This method can be used to initialize dynamicly populated Image Input instances(e.g: after Ajax request). 
KTImageInput.createInstances();
getInstance(DOMElement element) Get the Image input instance created 
var imageInputElement = document.querySelector("#kt_image_input_control");
var imageInput = KTImageInput.getInstance(imageInputElement);
Public Methods
Constructor Constructs a new instance of KTImageInputclass and initializes an Image Input control: 
var imageInputElement = document.querySelector("#kt_image_input_control");
var imageInput = new KTImageInput(imageInputElement);
Remove data-kt-image-input="true"attribute to avoid lazy initializes.
getInputElement Returns the selected image input instance input field. 
imageInput.getInputElement();
goElement Returns the selected image input instance. 
imageInput.goElement();

Events

Below are few events for hooking into the Image input functionality.
Event Type Description
kt.imageinput.change This event fires on when the image input is about to change. 
var imageInputElement = document.querySelector("#kt_image_input_example_1");
var imageInput = KTImageInput.getInstance(imageInputElement);
imageInput.on("kt.imageinput.change", function() {
    // console.log("kt.imageinput.change event is fired");
});
kt.imageinput.changed This event fires on when the image input has been changed. 
var imageInputElement = document.querySelector("#kt_image_input_example_1");
var imageInput = KTImageInput.getInstance(imageInputElement);
imageInput.on("kt.imageinput.changed", function() {
    // console.log("kt.imageinput.changed event is fired");
});
kt.imageinput.cancel This event fires on when the image input is about to get cancelled. 
var imageInputElement = document.querySelector("#kt_image_input_example_1");
var imageInput = KTImageInput.getInstance(imageInputElement);
imageInput.on("kt.imageinput.cancel", function() {
    // console.log("kt.imageinput.cancel event is fired");
});
kt.imageinput.canceled This event fires on when the image input has been cancelled. 
var imageInputElement = document.querySelector("#kt_image_input_example_1");
var imageInput = KTImageInput.getInstance(imageInputElement);
imageInput.on("kt.imageinput.canceled", function() {
    // console.log("kt.imageinput.canceled event is fired");
});
kt.imageinput.remove This event fires on when the image input is about to get removed. 
var imageInputElement = document.querySelector("#kt_image_input_example_1");
var imageInput = KTImageInput.getInstance(imageInputElement);
imageInput.on("kt.imageinput.remove", function() {
    // console.log("kt.imageinput.remove event is fired");
});
kt.imageinput.removed This event fires on when the image input has been removed. 
var imageInputElement = document.querySelector("#kt_image_input_example_1");
var imageInput = KTImageInput.getInstance(imageInputElement);
imageInput.on("kt.imageinput.removed", function() {
    // console.log("kt.imageinput.removed event is fired");
});

Demos

Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

Metronic Demos

demo
Demo 1
demo
Demo 2
demo
Demo 3
demo
Demo 4
demo
Demo 5
demo
Demo 6
demo
Demo 7
demo
Demo 8
demo
Demo 9
demo
Demo 10
demo
Demo 11
demo
Demo 12
demo
Demo 13
demo
Demo 14
demo
Demo 15
demo
Demo 16
demo
Demo 17
demo
Demo 18
demo
Demo 19
demo
Demo 20
demo
Demo 21
demo
Demo 22
demo
Coming soon
demo
Coming soon
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.