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!
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>