Daily Archives: December 1, 2015

jQuery AJAX file upload from html5 canvas – not working via AJAX POST

Published by:

If your code is right and you are using something like this:

var imgUrlCanvas= document.getElementById(“canvas”).toDataURL(“image/png”);
imgUrlCanvas = imgUrlCanvas.replace(‘data:image/png;base64,’, ”);

$.ajax({
type: ‘POST’,
url: “fileupload.aspx/UploadCanvasImage”,
data: ‘{ “imageData” : “‘ + dataURL + ‘” }’,
contentType: ‘application/json; charset=utf-8’,
dataType: ‘json’,
success: function (msg) {
alert(msg.d);
}
});

 

and your .ASPX or MVC is like this:

[WebMethod]
public static string UploadCanvasImage(string canvasImgData)
{
string Pic_Path = HttpContext.Current.Server.MapPath(“MyPicture.png”);
using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(canvasImgData);
bw.Write(data);
bw.Close();
}
}
return “success”;
}

 

You, find out that the the WebMethod method is not being called.

Reason: It seems the canvas image is large.

You need to add this to the web.config to make this work:

<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength=”10000000″ />
</webServices>
</scripting>
</system.web.extensions>

 

Now, the JQUERY AJAX will be able to call the method successfully.