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)
})
})

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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?

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(