-1

I am trying to pass an image through Ajax to my MVC Controller. Currently I am trying to pass it as a Base64 string but it is too long and is throwing Error 414 (Its around 33,000 characters).

The Base64 string comes from calling toDataUrl on a canvas I have, the canvas is a "screenshot" of the current browser window.

Is there a better way to pass the canvas image to my controller?

var imgBase64 = canvas.toDataURL('image/jpg').replace('data:image/png;base64,', '');

$.ajax({
     url: "API Url - Actual URL is in code just removed here",
     data: {
        "imgBase64":imgBase64 
     },
     contentType: "application/json; charset=utf-8",
     dataType: "jsonp",
     type:"POST",
     success: function(res){
         console.log("Success");
     }
});
CleverRya
  • 11
  • 3
  • 1
    Is there a particular reason you are using `jsonp`? – mjwills May 01 '19 at 02:12
  • Please use Chrome Developer Tools (Network tab) and share with us the URL you are POSTing to, and the body of the request. – mjwills May 01 '19 at 02:14
  • @mjwills I was having some CORS issues and just used jsonp to bypass it for now to try and fix this issue first. – CleverRya May 01 '19 at 02:21
  • An image just isn't appropriate to pass as part of a URL. Some browsers (e.g. IE) limit you to 2K characters. You are at 33K - which is **much** larger than 2K. – mjwills May 01 '19 at 03:27
  • @mjwills I got it solved, thanks for your comment on jsonp. I did some more research and learned it only sends GET requests so my Ajax body was being added onto the URL. I've fixed my Ajax to send standard Json as a Post and it is now sending the Base64 through the body as expected. – CleverRya May 01 '19 at 03:39

1 Answers1

0

My problem lied in using jsonp instead of json. Since jsonp only sends GET requests the Base64 string was being added onto the URL instead of being send in the POST body. Changing the datatype to json and resolving my CORS issues fixed my problem.

CleverRya
  • 11
  • 3