Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
imageInput is null
HTML:
<div class="mb-7">
<label class="fs-6 fw-semibold mb-3">
<span>Update Avatar</span>
<span class="ms-1" data-bs-toggle="tooltip" title="Allowed file types: png, jpg, jpeg.">
<i class="ki-duotone ki-information fs-7">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</i>
</span>
</label>
<div class="mt-1">
<div class="image-input image-input-outline image-input-placeholder image-input-empty image-input-empty" data-kt-image-input="true" id="profileAvatar">
<div class="image-input-wrapper w-100px h-100px" ></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" title="Change avatar">
<i class="ki-duotone ki-pencil fs-7">
<span class="path1"></span>
<span class="path2"></span>
</i>
<input type="file" id="avatar" 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" title="Cancel avatar">
<i class="ki-duotone ki-cross fs-2">
<span class="path1"></span>
<span class="path2"></span>
</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" title="Remove avatar">
<i class="ki-duotone ki-cross fs-2">
<span class="path1"></span>
<span class="path2"></span>
</i>
</span>
</div>
</div>
</div>Javascript:
var imageInputElement = document.querySelector("#profileAvatar");
console.log(imageInputElement);
var imageInput = KTImageInput.getInstance(imageInputElement);
console.log(imageInput);Issue:
"imageInput is null"
There don't appear to be any working examples in the documentation for the JavaScript components, so hoping to find an answer here in the forum on what I'm doing wrong.
Replies (3)
Hi,
Please make sure that you run your code on the Document Ready event when all the dependacy core JS code is loaded and available:
// On document ready
KTUtil.onDOMContentLoaded(function () {
var imageInputElement = document.querySelector("#profileAvatar");
console.log(imageInputElement);
var imageInput = KTImageInput.getInstance(imageInputElement);
console.log(imageInput);
});Also please make sure that all mandatory js scripts are properly loaded in your pages.
Regards.
You know you're burned out on a project when you start missing the simply things, that was it, I appreciate it!
Hi 
,
Glad to see that it worked for you. All the best with your project. If you need anything else please let us know.
Regards.
Your Support Matters!
We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
