Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Image Input Events
Hi, How to querySelector.
<div class="image-input image-input-empty" data-kt-image-input="true" >
<div class="image-input-wrapper w-125px h-125px"></div>
<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" data-bs dismiss="click" title="Change avatar"><i class="bi bi-pencil-fill fs-7"></i>
<input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
<input type="hidden" name="avatar_remove" />
</label>
<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" data-bs-dismiss="click" title="Cancel avatar"> <i class="bi bi-x fs-2"></i> </span>
<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" data-bs-dismiss="click" title="Remove avatar"><i class="bi bi-x fs-2"></i></span>
</div>var imageInputElement = document.querySelector("#kt_image_input_example_1");
var imageInput = KTImageInput.getInstance(imageInputElement);
imageInput.on("kt.imageinput.changed", function() {
// console.log("kt.imageinput.changed event is fired");
})#kt_image_input_example_1 where ?
Replies (1)
Hi,
To use Metronic's Bootstrap Image Input component API you should assign the ID to the root element:
<div class="image-input image-input-empty" data-kt-image-input="true">
....
</div>Regards
