Model passed to web api is null if I pass base 64 encoded image in model

Issue

I am sending a model to server through webapi ,model contains base 64 encoded image but if i send without encoded string then at server side i am getting all other properties of model ,

but when i include base64 encoded string in model whole model coming as null,

i am using AngularJS at client side and .net WebApi at server

Angular code

var base64ImageString='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMg.......'
var req = {
 method: 'POST',
 url: 'myurl',
 data: { EncodedImage: base64ImageString,Name:'Rajiv' }
}

$http(req).then(function(){...}, function(){...});

Server Side Code

 public HttpResponseMessage Post([FromBody] UserInfo userInfo)
{
  //My Stuff
}

public class UserInfo
{
public String EncodedImage{get;set;}
public String Name{get;set;}
}

Solution

Is your image too large? Try uploading smaller images (a few 100 KBs in size). If that works, try compressing, or reducing the resolution of the image before encoding it. Here is an example: https://stackoverflow.com/a/20382559/1237117

Another option is to increase the json size limit at your Web API.

<configuration> 
   <system.web.extensions>
       <scripting>
           <webServices>
               <jsonSerialization maxJsonLength="50000000"/>
           </webServices>
       </scripting>
   </system.web.extensions>
</configuration> 

Answered By - mridula