I created a signature pad with HTML. I assigned canvas value to a variable by id, then I converted the assigned value to URL with the toDataURL command. I want to send this URL to the controller with AJAX and save it in database, but I get a 404 error because the data URL is too long. I'll be happy if you can help me. Here is my code.
HTML:
@using RasyoMed.WEBUI.Controllers.Classes
<div class="col-md-12">
<label class="baslik">İmza</label>
</div>
<div class="col-md-12">
<canvas id="sig-canvas-@Model" class="sig-canvas test" download="new-image-name.jpg" width="620" height="160"></canvas>
</div>
<div class="col-md-12">
<button type="button" id="sig-clearBtn-@Model" class="btn btn-warning">İmza Temizle</button>
<button type="button" id="sig-saveBtn-@Model" class="btn btn-success">İmza Kaydet</button>
</div>
JavaScript:
saveBtn.addEventListener("click", function (e) {
var dataURL = canvas.toDataURL();
dataURL = dataURL.replace('data:image/png;base64,', '');
imzaKaydet(dataURL);
}, false);
function imzaKaydet(dataURL) {
debugger;
$.ajax({
url: '/HemsireFormlari/ImzaKaydet',
type: 'POST',
dataType: 'json',
data: {
dataURL: dataURL
},
type:'GET',
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
if (result == "Başarılı") {
Swal.fire({
type: 'success',
title: "İmzanız kaydedilmiştir.",
showConfirmButton: false,
timer: 1500
})
}
},
error: function (xhr) {
//Ajax request failed.
var errorMessage = xhr.status + ': ' + xhr.statusText
Swal.fire({ type: 'error', title: 'Hata !', text: 'Error - ' + errorMessage })
}
});
}
Controller:
public JsonResult ImzaKaydet(string dataURL)
{
int KullaniciId = Convert.ToInt32(Session["KullaniciId"]);
KullaniciImza kImza = new KullaniciImza();
RepositoryBase<KullaniciImza> rbhastadosyaFormu = new RepositoryBase<KullaniciImza>(new YBDBEntities());
kImza = db.KullaniciImza.Where(x => x.KullaniciId == KullaniciId).FirstOrDefault();
if(kImza == null)
{
kImza.KullaniciId = KullaniciId;
kImza.ImzaPath = dataURL;
rbhastadosyaFormu.Ekle(kImza);
}
else
{
kImza.ImzaPath = dataURL;
rbhastadosyaFormu.Guncelle(kImza);
}
return Json("Başarılı", JsonRequestBehavior.AllowGet);
}
imzaKaydet
specifiestype: "POST"
andtype: "GET"
. That seems likely to be the cause of your issues.