title: How to post FileReader object using $.ajax and asp.net MVC
body: <p>I want add temporary images first and then on submit i want to add all those images to server.</p>
  
  <p>Here is my class</p>
  
  <pre><code>public class UserModel
  {
       public int Id { get; set; }
       public string FirstName { get; set; }
       public List&lt;AcademicDetailModel&gt; AcademicDetails { get; set; } 
  }
  
  public class AcademicDetailModel 
  {
       public int Id { get; set; }
       public int UserId { get; set; }
       public int CollegeId { get; set; }
       public HttpPostedFileBase DegreeFile { get; set; }
       public String DegreeFilePath { get; set; }
  }
  </code></pre>
  
  <p>Here is my script</p>
  
  <pre><code>&lt;script&gt;
      var arrAcademicDetail = new Array();
      function AcademicDetailModel() {
          this.Id = 0;
          this.UserId = 0;
          this.CollegeId = 0;           
          this.DegreeFile=new FileReader();
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>here is my click event that adds temp image to the array.</p>
  
  <pre><code>$(document).ready(function () {
          $('#btnAcademic').click(function () {
  
               var _AcademicDetailModel = new AcademicDetailModel();
               _AcademicDetailModel.Id=(arrAcademicDetail.length)+1;
               _AcademicDetailModel.CollegeId = $('#CollegeId').val();                   
  
               if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob) {
                   var file = document.getElementById("DegreeFilePath").files[0];
                   _AcademicDetailModel.DegreeFile=file;
                  }
  
  
               arrAcademicDetail.push(_AcademicDetailModel);
  
  
          })
   })
  </code></pre>
  
  <p>here is the final submit event that submits data to the server.</p>
  
  <pre><code>$.ajax({
              url: '@Url.Action("AcademicDetail", "Home")',
              data: { "Model": {
                  "Id":UserId,
                  "AcademicDetails": arrAcademicDetail
              }},
              contentType: false,
              processData: false,
              type: 'POST',
              beforeSend: function () {
                  DDU.blockUI({ message: "Please wait.." });
              },
              success: function (result) {
                  var obj = $.parseJSON(result);
                  //Other Process
              },
              complete: function () {
                  DDU.unblockUI();
  
              },
              error: function () {
                  DDU.unblockUI();
                  bootbox.alert("Oops ! you caught an error.&lt;br/&gt;&lt;br/&gt;&lt;b&gt;Possible Reason&lt;/b&gt; &lt;br/&gt;- Invalid data");      
              }
          });
  </code></pre>
  
  <p>here is my action </p>
  
  <pre><code>public ActionResult AcademicDetail(UserModel Model)
  {
     try
     {
     }
     catch()
     {
     }
  }
  </code></pre>
  
  <p>but in this action i get Model.AcademicDetails null.</p>