Preview Purchase
Forms

Tailwind CSS Image Input

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

Default Usage

An example of Tailwind CSS Image Input component featuring a placeholder image for the empty state.
Preview HTML
Click to remove or revert

Editable

An example of a Tailwind CSS Image Input component with a preset value, allowing for both editing and new image uploads.
Preview HTML
Click to remove or revert

Source Code

The following source files manage the JavaScript behavior and CSS styles of the Tailwind CSS Image Input component. Upon building the assets using Webpack Build Tools , these files are compiled and added into the dist/assets/css/styles.css and dist/assets/js/core.bundle.js bundles, making them available globally across all pages.
File Description
src/core/components/image-input/image-input.ts The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Image Input component.
src/core/plugins/components/image-input.js The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Image Input component.

HTML Markup

The following markup outlines the core structure of the Tailwind CSS ImageInput component. 
				
					<div class="image-input size-16" data-image-input="true">
 <input accept=".png, .jpg, .jpeg" name="avatar" type="file"/>
 <input name="avatar_remove" type="hidden"/>
 <div class="btn btn-icon btn-icon-xs btn-light shadow-default absolute z-1 size-5 -top-0.5 -right-0.5 rounded-full" data-image-input-remove="" data-tooltip="#image_input_tooltip" data-tooltip-trigger="hover">
  <i class="ki-outline ki-cross">
  </i>
 </div>
 <span class="tooltip" id="image_input_tooltip">
  Click to remove or revert
 </span>
 <div class="image-input-placeholder rounded-full border-2 border-success image-input-empty:border-gray-300" style="background-image:url(/static/metronic/tailwind/docs/dist/assets/media/avatars/blank.png)">
  <div class="image-input-preview rounded-full" style="background-image:url(/static/metronic/tailwind/docs/dist/assets/media/avatars/300-2.png)">
  </div>
  <div class="flex items-center justify-center cursor-pointer h-5 left-0 right-0 bottom-0 bg-dark-clarity absolute">
   <svg class="fill-light opacity-80" height="12" viewbox="0 0 14 12" width="14" xmlns="http://www.w3.org/2000/svg">
    <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 6.99984 9.64585Z" fill="">
    </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" fill="">
    </path>
   </svg>
  </div>
 </div>
</div>

Attributes

The following HTML attributes are utilized by the accordion component to control its JavaScript behavior.
HTML Attribute Description
data-image-input-remove="true" Marks an element as the trigger for removing or cancelling the selected image, allowing user interaction to clear the current image selection.

Classes

This table details the custom CSS classes used for styling the Tailwind CSS Drawer component.
Class Description
image-input Base class for the image input component, setting up its structure.
image-input-preview Used to display the selected or preset image thumbnail.
image-input-placeholder Displays a placeholder image when no image is selected.
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.

Variants

Utilize the following Tailwind CSS ImageInput variants to manage the appearance of the image-input items and their child elements. For more information, refer to the Tailwind CSS Variant documentation .
Class Description
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.
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. 
				
					<div class="image-input" data-image-input="true">
 <input accept=".png, .jpg, .jpeg" name="avatar" type="file"/>
 <input name="avatar_remove" type="hidden"/>
 <div data-image-input-remove="true">
  <i class="ki-outline ki-cross">
  </i>
 </div>
 <div class="image-input-placeholder" style="background-image:url(media/avatars/blank.png)">
  <div class="image-input-preview" style="background-image:url(media/avatars/300-2.png)">
  </div>
 </div>
</div>

Data Attribute Initialization

Auto-initialize all KTImageInput instances on page load by adding the data-image-input="true" attribute to your image-input element. This triggers on the fly initialization by the KTImageInput JavaScript component. 
				
					<div class="image-input" data-image-input="true" id="my_image_input">
 ...
</div>
These attributes allow you to set options for the KTImageInput component during initialization. The values you provide as strings are automatically converted to the appropriate KTImageInput Options .
HTML Attribute Type Default Description
data-image-input boolean true Automatically initializes Tailwind CSS ImageInput instances on page load. This can be disabled for manual initialization via JavaScript.
data-image-input-hidden-class string "hidden" Tailwind CSS class to use for the hidden state of the tab contents.

JavaScript Initialization

To initialize a new image-input component, pass the corresponding DOM element and configuration options to the KTImageInput class constructor.
JavaScript HTML 
				
					const imageInputEl = document.querySelector('#my_image_input');
const options = {
	hiddenClass: 'hidden'
};

const imageInput = new KTImageInput(imageInputEl, options);

To initialize the image-input with JavaScript, use data-image-input="false" attribute instead. This prevents automatic initialization on page load.

Options

This table outlines the configuration options for initialization of Tailwind CSS ImageInput instances, using the KTImageInput JavaScript component.
Option Type Default Description
hiddenClass string "hidden" Tailwind CSS class to use for the hidden state of the tab contents.

Utilities

Manage and interact with KTImageInput instances using these static methods of KTImageInput class.
Method Description
init() Automatically initializes KTImageInput object for all elements with the data-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 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.
JavaScript HTML 
				
					// 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);

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.
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.
JavaScript HTML 
				
					const imageInputEl = document.querySelector('#my_image-input');
const imageInput = KTImageInput.getInstance(imageInputEl);

imageInput.remove();
const status = imageInput.isChanged();

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 Fires when the user initiates a change in the image input, such as selecting a new image but before the image is actually set.
changed Occurs after the image has been successfully changed, indicating the new image is now set in the component.
remove Triggers when the user starts the action to remove the current image, prior to the actual removal process.
removed Fires after the image has been successfully removed from the component, indicating no image is currently selected. 
				
					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');
});
Previous File Input Next Input