How to set image to input file field

Question

I have the following input:

  <input type="file" asp-for="ScreenShotImage" id="offer-client-image"/>   

The application is making screenshot-image from the div calculator, and I want to set that image to id="offer-client-image" input. When the user submit the form, the image will be uploaded as well.

I tried like this, but it doesn't work:

 document.getElementById("offer-client-image").file = document.getElementById('canvas').toDataURL()

Any help is appreciated!

Answer 1

I don't think using an actual file input is relevant because the user doesn't have to choose anything.

Maybe you could handle this like this:

const form = document.getElementById("the_form")
const cvs = document.getElementById("the_canvas")

form.onsubmit = function(e) {
  e.preventDefault()
  const data = new FormData(form)
  cvs.toBlob(img_blob => {
    data.append("img_file", img_blob)
    // send your form
    fetch("https://example.com/post_url", {
      method: "POST",
      body: data
    });
  })
}

<form id="the_form">
  <input type="submit" />
</form>
<canvas id="the_canvas"></canvas>