Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$ 
Image input in Laravel 9 with javascript
I can't find a way to edit with javascript and submit the image. The controller always returns me missing image. I want use the image-input metronic component.
What would be the correct way to do it?
This is my submit form:
var pageSelect = document.querySelectorAll("#page :checked");
KTImageInput.createInstances();
var imageInputElement = document.querySelector("[name="image"]"); //this is the input image type file
fetch(form.action, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json, text-plain, */*",
"X-CSRF-TOKEN": token
},
body: JSON.stringify({
image: KTImageInput.getInstance(imageInputElement),
drawer: editor.getData(),
contact_title: String(form.querySelector("[name="contact_title"]").value),
contact_link: String(form.querySelector("[name="contact_link"]").value),
info_title: String(form.querySelector("[name="info_title"]").value),
info_link: String(form.querySelector("[name="info_link"]").value),
call: String(form.querySelector("[name="call"]").value),
page: [...pageSelect].map(option => option.value)
})
})
Replies (2)
Hi,
The KTImageInput uses standard HTML file upload input by enabling image thumbnail preview for it. To submit the file input data via ajax you can follow this tutorial.
Please try to test your form with a normal form submit first to see if the image input is working fine and your backend can receive it. Then you can implement the ajax submit.
Regards.
Is it possible to implement form validation within image input? if so how to do that?
