0

I have a problem which I can't seem to wrap my head around. I have a canvas element which let's the user draw inside it with the use of their mouse. This image should then be stored to the database to be viewed later.

What I have so far;

In the HTML:

<canvas id="signature" class="signature" width="800" height="300"></canvas>
<input id="Signature_Image" name="signature" class="hidden" />

In the javascript:

function beforeSubmit() {
    document.getElementById('Signature_Image').src = document.getElementById("signature").toDataURL();       
}

And then I try to retrieve it inside the controller:

public ActionResult Create(HttpPostedFileWrapper signature)

The signature is always null. Am I missing something?

I have check to see that the canvas.toDataURL() actually returns something, and it even fills the src-attribute of the input element.

And I have the correct enctype: @using (Html.BeginForm("Create", "WorkOrder", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "return beforeSubmit()" })

Have tried changing the type of the input to 'file', 'image' and 'text', with no success. Have also tried retrieving the base64 string in different formats, such as 'Image' and 'string'.

Any help is appreciated.

Regards,
Robin

Robin Dorbell
  • 1,489
  • 1
  • 12
  • 26

0 Answers0