Image Input

Docs

Image Input

Tailwind Image Input is a custom component with image thumbnail preview support that allows and user-friendly way to handle image uploads.

Examples

Basic Usage

<div class="kt-image-input" data-kt-image-input="true">
  <input type="file" accept=".png, .jpg, .jpeg" name="avatar" /><input
    type="hidden"
    name="avatar_remove"
  /><button
    type="button"
    data-kt-tooltip="true"
    data-kt-tooltip-trigger="hover"
    data-kt-tooltip-placement="right"
    data-kt-image-input-remove="true"
    class="kt-image-input-remove"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-x"
      aria-hidden="true"
    >
      <path d="M18 6 6 18"></path>
      <path d="m6 6 12 12"></path></svg
    ><span data-kt-tooltip-content="true" class="kt-tooltip"
      >Click to remove or revert</span
    >
  </button>
  <div
    data-kt-image-input-placeholder="true"
    class="kt-image-input-placeholder"
    style="background-image: url(/media/avatars/blank.png)"
  >
    <div
      data-kt-image-input-preview="true"
      class="kt-image-input-preview"
      style="background-image: url(/media/avatars/300-2.png)"
    ></div>
    <div
      class="flex items-center justify-center cursor-pointer h-5 left-0 right-0 bottom-0 bg-black/25 absolute"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="14"
        height="12"
        viewBox="0 0 14 12"
        class="fill-gray-100 opacity-80"
      >
        <path
          d="M11.6665 2.64585H11.2232C11.0873 2.64749 10.9538 2.61053 10.8382 2.53928C10.7225 2.46803 10.6295 2.36541 10.5698 2.24335L10.0448 1.19918C9.91266 0.931853 9.70808 0.707007 9.45438 0.550249C9.20068 0.393491 8.90806 0.311121 8.60984 0.312517H5.38984C5.09162 0.311121 4.799 0.393491 4.5453 0.550249C4.2916 0.707007 4.08701 0.931853 3.95484 1.19918L3.42984 2.24335C3.37021 2.36541 3.27716 2.46803 3.1615 2.53928C3.04584 2.61053 2.91234 2.64749 2.7765 2.64585H2.33317C1.90772 2.64585 1.49969 2.81486 1.19885 3.1157C0.898014 3.41654 0.729004 3.82457 0.729004 4.25002V10.0834C0.729004 10.5088 0.898014 10.9168 1.19885 11.2177C1.49969 11.5185 1.90772 11.6875 2.33317 11.6875H11.6665C12.092 11.6875 12.5 11.5185 12.8008 11.2177C13.1017 10.9168 13.2707 10.5088 13.2707 10.0834V4.25002C13.2707 3.82457 13.1017 3.41654 12.8008 3.1157C12.5 2.81486 12.092 2.64585 11.6665 2.64585ZM6.99984 9.64585C6.39413 9.64585 5.80203 9.46624 5.2984 9.12973C4.79478 8.79321 4.40225 8.31492 4.17046 7.75532C3.93866 7.19572 3.87802 6.57995 3.99618 5.98589C4.11435 5.39182 4.40602 4.84613 4.83432 4.41784C5.26262 3.98954 5.80831 3.69786 6.40237 3.5797C6.99644 3.46153 7.61221 3.52218 8.1718 3.75397C8.7314 3.98576 9.2097 4.37829 9.54621 4.88192C9.88272 5.38554 10.0623 5.97765 10.0623 6.58335C10.0608 7.3951 9.73765 8.17317 9.16365 8.74716C8.58965 9.32116 7.81159 9.64431 7 9.64585Z"
        ></path>
        <path
          d="M7 8.77087C8.20812 8.77087 9.1875 7.7915 9.1875 6.58337C9.1875 5.37525 8.20812 4.39587 7 4.39587C5.79188 4.39587 4.8125 5.37525 4.8125 6.58337C4.8125 7.7915 5.79188 8.77087 7 8.77087Z"
        ></path>
      </svg>
    </div>
  </div>
</div>

Component API

Options

These data attributes allow you to set options for the image-input component during auto initialization.

Option	Type	Default	Description
`data-kt-image-input-hidden-class`	~~string~~	~~"hidden"~~	Tailwind class to use for the hidden state of the tab contents.

Selectors

This table details the custom classes and data attributes used by the image-input component.

Name	Description
Data Attributes
`data-kt-image-input="true"`	Automatically initializes Tailwind Image Input instances on page load. This can be disabled for manual initialization via JavaScript.
Classes
`hidden`

Tailwind Modifiers

Custom modifiers to control the image input's style and behavior with Tailwind classes.

Name	Description
`kt-image-input-empty:*`	This variant activates when the image input is empty, affecting the toggle element and its children. It controls their style and behavior, ensuring appropriate visual cues are displayed in the empty state.
`kt-image-input-changed:*`	This variant comes into play when the image has been changed. It targets the toggle element and its children, managing their style and behavior to reflect the updated state.

Methods

Use KTImageInput component's API methods to programmatically control its behavior.

Method	Description
`new KTImageInput(element, options)`	Creates an object instance of KTImageInput class for the given DOM ~~element~~ and configuration ~~options~~ .
`remove()`	Deletes the current image from the component, clearing the selection.
`update()`	Refreshes the component, typically used after changing the image to ensure the UI reflects the current state.

const imageInputEl = document.querySelector('#my_image-input');
const imageInput = KTImageInput.getInstance(imageInputEl);
 
imageInput.remove();
const status = imageInput.isChanged();

Utilities

Manage and interact with KTImageInput instances using these static methods of KTImageInput JavaScript class.

Method	Description
`init()`	Automatically initializes KTImageInput object for all elements with the ~~data-kt-image-input="true"~~ attribute on page load.
`createInstances()`	Allows to create KTImageInput instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
`getInstance(element)`	Returns the ~~KTImageInput~~ object associated with the given DOM element .

// Initialize all image inputs
KTImageInput.init();
 
// Initialzie pending image inputs
KTImageInput.createInstances();
 
// Get image input object
const imageInputEl = document.querySelector('#my_image_input');
const imageInput = KTImageInput.getInstance(imageInputEl);

Events

KTImageInput custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.

Event	Description
`change`	Automatically initializes KTImageInput object for all elements with the ~~data-kt-image-input="true"~~ attribute on page load.
`changed`	Allows to create KTImageInput instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
`remove`	Returns the ~~KTImageInput~~ object associated with the given DOM element ~~element~~ .

const imageInputEl = document.querySelector('#my_image_input');
const imageInput = KTImageInput.getInstance(imageInputEl);
 
imageInput.on('change', (detail) => {
  detail.cancel = true;
  console.log('change action canceled');
});
 
imageInput.on('changed', () => {
  console.log('changed event');
});

PreviouseDropdown NextInput

On This Page

Examples
- Basic Usage
Component API