title: Sending large JSON via jQuery ajax errors with 404, TypeMismatchError, or "Not enough storage is available to complete this operation"
body: <p>I'm working on an ASP.NET web application for uploading files and I'm having an issue when the upload size gets large.</p>
  
  <p>I'm sending a JSON string to a C# WebMethod. The JSON contains files (base64) and metadata about the file (input by the user).</p>
  
  <p>Here's the structure of my JSON:</p>
  
  <pre><code>{
      "files" : 
      [
          {
              "filename" : "test.txt",
              "fileBase64" : "base64string",
              "customMetadata" : "bla bla bla"
          },
          {
              "filename" : "test2.txt",
              "fileBase64" : "base64string",
              "customMetadata" : "bla bla bla"
          }
      ]
  }
  </code></pre>
  
  <p>UploadInput class:</p>
  
  <pre><code>public class UploadInput
  {
      public string filename { get; set; }
      public string fileBase64 { get; set; }
      public string customMetadata { get; set; }
  }
  </code></pre>
  
  <p>Web method signature:</p>
  
  <pre><code>[WebMethod]
  public static string UploadFiles(List&lt;UploadInput&gt; files) { ... }
  </code></pre>
  
  <p>When the JSON is below ~30MB, everything works fine.</p>
  
  <p>When the JSON gets around 30MB, I get a 404 not found error. (IE, Chrome, and Filefox)</p>
  
  <p>When the JSON gets around 50MB, I get a TypeMismatchError. (Just IE)</p>
  
  <p>When the JSON gets around 60MB, I get a "Not enough storage is available to complete this operation" error. (Just IE)</p>
  
  <p>I captured the web traffic and the request isn't being sent when I encounter the TypeMismatchError or the "Not enough storage is available to complete this operation" error, so they must be occurring on the client.</p>
  
  <p>Here's my JavaScript:</p>
  
  <pre><code>function uploadFiles() {
      $.blockUI({ message: null });
  
      var formData = {
          "files" : _files
      }
  
      $.ajax({
          url: 'Images.aspx/UploadFiles',
          type: 'POST',
          data: JSON.stringify(formData),
          dataType: 'json',
          contentType: 'application/json; charset=utf-8',
          success: function (result) {
              // remove the upload rows
              $(".upload-row").remove();
  
              // clear the _files array
              _files = [];
              updateCurrentUploadSize();
  
              // display the result
              displayUploadResults(result.d);
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              // display the error
              $("#upload-results-div")
                  .html("Request: " + XMLHttpRequest.toString()
                      + "\n\nStatus: " + textStatus 
                      + "\n\nError: " + errorThrown);
          },
          complete: function () {
              $.unblockUI();
          }
      })
  }
  </code></pre>
  
  <p>The arguments to the error function aren't giving me any detailed information, just 404, TypeMismatchError, and "Not enough storage is available to complete this operation". Is there a way for me to obtain more information on the errors?</p>
  
  <p>I already set <code>maxJsonLength="100000000"</code> and <code>maxRequestLength="100000000"</code> in my Web.config file. Are there any other settings that would prevent the request from being sent?</p>
  
  <p>Any ideas and suggestions would be helpful, I'm completely stuck on this one.</p>
  
  <p>Thanks.</p>