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 inputsKTImageInput.init();// Initialzie pending image inputsKTImageInput.createInstances();// Get image input objectconst 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 .
Hides elements not needed for the current user action.
changed
Indicates the preset image has changed or been removed.
empty
Shows when no image is currently selected.
isEmpty()
Returns a boolean indicating whether the component has no image selected.
isChanged()
Checks if the image has been changed from its initial state, returning a boolean.
setPreviewUrl(url)
Sets the URL for the image preview, updating the component to display the specified image.
getPreviewUrl()
Retrieves the current URL used for the image preview, allowing access to the image being displayed.
getOption(name)
Retrieves the value of a configuration option by name parameter from a KTImageInput instance.
getElement()
Retrieves the DOM element linked to a specific KTImageInput instance.
on(eventName, handler)
Allows attaching event listeners to the KTImageInput custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTImageInput. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed.
off(eventName, eventId)
Removes an event listener for the eventName and eventId parameters attached with the on method.
dispose()
Removes the KTImageInput instance from an element, including any associated data stored on the DOM element.
element
getOrCreateInstance(element)
Returns the existing KTImageInput object for the provided DOM element element , or creates a new instance if none exists, then returns the same.
removed
Returns the existing KTImageInput object for the provided DOM element element , or creates a new instance if none exists, then returns the same.
