Tailwind Image Input is a custom component with image thumbnail preview support that allows and user-friendly way to handle image uploads.
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 | Tailwind class to use for the hidden state of the tab contents. |
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 | 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. |
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. |
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 |
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. |
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 |
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 |
off(eventName, eventId) | Removes an event listener for the |
dispose() | Removes the KTImageInput instance from an element, including any associated data stored on the DOM element. |
const imageInputEl = document.querySelector('#my_image-input');
const imageInput = KTImageInput.getInstance(imageInputEl);
imageInput.remove();
const status = imageInput.isChanged();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 |
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 |
getOrCreateInstance(element) | Returns the existing |
// 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);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 |
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 |
removed | Returns the existing |
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');
});