title: How to Fix HttpPostedFileBase null when Passing FormData to AJAX Call
body: <p>I have an AJAX call which passes data along with a file to the ViewModel and calls the controller:</p>
  
  <pre><code>function fncInsTrainingLog()
  {
      var trainingtitle = getValOf("trainingTitle");
      var ImageFile = $('#imageUploadForm')[0].files[0];
  
      var sdata = {
          TrainingTitle :trainingtitle,
          ImageFile : ImageFile
      }
  
      $.ajax({
          url: "/Capability/InsTrainingLog",
          type: "POST",
          data: JSON.stringify(sdata),
          contentType: "application/json",
          dataType: "json",
          success: function () {
              location.reload();
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              alert("A problem has been encountered. Please contact the web administrator.");
          }
      });
  } 
  </code></pre>
  
  <p>Here is my controller:</p>
  
  <pre><code>[HttpPost]
  public JsonResult InsTrainingLog(TrainingModel trainingModel)
  {
  
      // Psuedo code to save file to drive
      // get file from TrainingModel 
      // save(file)
  
      string sp = "usp_InsTrainingLog";
  
      object[] param =
      {
          "@TrainingTitle", trainingModel.TrainingTitle
      };
  
      dbHelper.ExecuteProcedureNonQuery(sp, param);
      var result = param;
  
      return Json(result, JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>ViewModel:</p>
  
  <pre><code>   public sealed class TrainingModel
      {
          public HttpPostedFileBase ImageFile { get; set; }
          public string TrainingTitle { get; set; }
  
      }
  </code></pre>
  
  <p>The <code>ImageFile</code> in the <code>TrainingModel</code> returns a null but the <code>TrainingTitle</code> is fine. Why can't the ViewModel read the file from the AJAX call? </p>
  
  <p>How do I pass the file to the ViewModel and save the image to my PC?</p>