title: Passing two or more images in JSON data to MVC Controller does't work
body: <p>I have a asp.net mvc web application that has a form with some text data (title, description e.g.) and some images. Because of resizing the images before I send them to the server I have a javascript function to resize the images, put all data into an object and send it as JSON with an ajax call to the server.</p>
  
  <p>This is the Model:</p>
  
  <pre><code>public class ItemCU
  {
      public int pid { get; set; }
      public string pcat { get; set; }
      public string ptitle { get; set; }
      public string pdescription { get; set; }
      public double pprice { get; set; }
      public int pcount { get; set; }
      public int psort { get; set; }
      public string[] pimgOrder { get; set; }
      public string[] pimgNum { get; set; }
      public string[] pimgData { get; set; }
      public List&lt;SelectListItem&gt; pcategories { get; set; }
  }
  </code></pre>
  
  <p>This is the javascript function:</p>
  
  <pre><code>    function saveData() {
  
          var imgNum = [], imgData = [];
          for (var i = 0; i &lt; newOrder.length; i++) {
              if (newOrder[i] &gt; 999999) {
                  imgNum.push(newOrder[i]);
                  var resimg = resizeImage($("img[data-id='" + newOrder[i] + "'").attr('src'));
                  imgData.push(resimg);
              }
          }
  
          var itmData = {
              pid: $("#id").val(),
              ptitle: $("#title").val(),
              pcat: $("#cat").val(),
              pdescription: $("#description").val(),
              pcount: $("#count").val(),
              pprice: $("#price").val(),
              psort: $("#sort").val(),
              pimgOrder: newOrder,
              pimgNum : imgNum,
              pimgData : imgData
          }
  
          $.ajax(
              {
                  url: '@Url.Action("ItemEdit", "Admin")',
                  type: 'POST',
                  contentType: 'application/json',
                  data: JSON.stringify({ piData: itmData }),
                  success: function (delres) {
                      window.location.href = delres.redirectUrl;
                  },
                  error: function (delres) {
                      window.location.href = delres.redirectUrl;
                      }
                  }
              }
          )
      }
  </code></pre>
  
  <p>I shortened the ajax call aound the callback part.</p>
  
  <p>Everything works fine, when I just select and send one image but when I want to send multiple images it doesn't work. It looks like that the data isn't sent by ajax but will continue directly with error callback..</p>
  
  <p>I made a screenshot of my browser debugging session, where you can see that the array (pimgdata) contains two images, so up to there everything still is ok.</p>
  
  <p><a href="https://i.stack.imgur.com/TtiXM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TtiXM.jpg" alt="Screenshot of debugging JS"></a></p>
  
  <p>Whenever i try to google I find examples with just sending images without other data or data and one image...</p>
  
  <p>My question now ist, if I made something wrong with the call (maybe thiat stringify) or if it doesn't work anyway the way I want it to?</p>
  
  <p>I would be really thankful to get some tips/hints/advice. Even some keywords I could google would be helpful.</p>
  
  <p>Thanks in advance,
  Tim
  (I hope that the question has all informationen needed...)</p>
  
  <p>UPDATE:</p>
  
  <p>After the advice from Robby Cornelissen I found out that there seems to be a "simple" issue with the maxJsonLength. Unfortunately, when I google it I usually find answers for sending data from server to client - not vice versa. As I already read it's not neccessary to edit the webconfig as it is just for webservices - not for MVC controller.</p>
  
  <p>I read that I could change to JSON.serialize but I think the problem will be the same. </p>
  
  <p>Honestly I don't understand if this is a problem of sending data to the server and/or receiving data on server side...</p>
  
  <p>Any hints that I can google?
  Thanks a lot,
  Tim</p>
  
  <h1><strong>UPDATE 2 / 'SOLUTION'</strong></h1>
  
  <p>After long time of searching i found two pages that helped me to get a 'solution' that finally worked. Don't know if there might be a better way, but...</p>
  
  <p>First part I found on <a href="https://www.experts-exchange.com/questions/28983208/maxJsonLength-exceeded-error-on-ajax-Post-to-ASP-NET-MVC-Controller-Action-method.html" rel="nofollow noreferrer">ExpertsExchange</a>:
  They created a custom JsonValueProviderFactory and replaced the default with this one in Global.asax</p>
  
  <p>Additionally I added maxRequestLength and maxAllowedContentLength to my web.config as I found here on <a href="https://stackoverflow.com/questions/288612/how-to-increase-the-max-upload-file-size-in-asp-net">StackOverflow</a></p>
  
  <p>There might be better solutions but for me it worked.</p>
  
  <p>Thanks a lot,
  Tim</p>