New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
How to fire a Modal with onchange event of an Input type = file
I have purchased the Start Pro theme and I need to show an image in the Modal with some options in it. How to fire a Modal with onchange event of an Input type = file?
Please help.
Thanks.
Replies (2)
You can trigger the modal inside the onchange event like this:
document.getElementById('fileInput').onchange = function () {
// Show modal
$('#myModal').modal('show');
// Optionally preview the image
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
document.getElementById('imagePreview').src = e.target.result;
};
reader.readAsDataURL(file);
}
};
Hi,
Currently we don't have image preview on Modal. However you can try to ask this Chatgpt and it will offer you working code for your request.
Regards,
Sean
