Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI 
Use ImageInput correctly
Hi, I want to know how to use Image Input correctly. I try to use this code:
imageInput = KTImageInput.createInstances();
imageInput.on("kt.imageinput.remove", function() {
console.log("kt.imageinput.remove event is fired");
});And I also use:
imageInputElement = document.querySelector("#profile_picture");
imageInput = KTImageInput.getInstance(imageInputElement);
imageInput.on("kt.imageinput.remove", function() {
// console.log("kt.imageinput.remove event is fired");
});but it's still giving me an error
edit.js:209 Uncaught TypeError: Cannot read properties of undefined (reading 'on')Here's my HTML Input :
<div class="col-lg-8">
<!--begin::Image input-->
<div class="image-input image-input-outline" data-kt-image-input="true" >
<!--begin::Preview existing avatar-->
<div class="image-input-wrapper w-125px h-125px" ></div>
<!--end::Preview existing avatar-->
<!--begin::Label-->
<label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change"
data-bs-toggle="tooltip" title="Change avatar">
<i class="ki-duotone ki-pencil fs-7">
<span class="path1"></span>
<span class="path2"></span>
</i>
<!--begin::Inputs-->
<input type="file" name="profile_picture" id="profile_picture" accept=".png, .jpg, .jpeg" />
<input type="hidden" name="avatar_remove" />
<!--end::Inputs-->
</label>
<!--end::Label-->
<!--begin::Cancel-->
<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel"
data-bs-toggle="tooltip" title="Cancel avatar">
<i class="ki-duotone ki-cross fs-2">
<span class="path1"></span>
<span class="path2"></span>
</i>
</span>
<!--end::Cancel-->
<!--begin::Remove-->
<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove"
data-bs-toggle="tooltip" title="Remove avatar">
<i class="ki-duotone ki-cross fs-2">
<span class="path1"></span>
<span class="path2"></span>
</i>
</span>
<!--end::Remove-->
</div>
<!--end::Image input-->
<!--begin::Hint-->
<div class="form-text">Allowed file types: png, jpg, jpeg.</div>
<!--end::Hint-->
</div>
<!--end::Col-->
Replies (1)
Hi Eko Budiyanto
on() method that doesn't exist in the KTImageInput implementation.
Here is the working example:
// Wait for the DOM to be ready
document.addEventListener("DOMContentLoaded", function() {
// Initialize all image inputs
KTImageInput.init();
// Get your specific input
const imageInputElement = document.querySelector("#profile_picture").closest("[data-kt-image-input="true"]");
// Listen for events
imageInputElement.addEventListener("change", function() {
console.log("Image changed");
});
imageInputElement.addEventListener("remove", function() {
console.log("Image removed");
});
// If you need to interact with the component directly
const imageInput = KTImageInput.getInstance(imageInputElement);
// Example: You can call methods directly
// imageInput.remove(); // Remove the image
// imageInput.update(); // Update the image
});Thanks
