title: File upload in MVC when used in bootstrap modal returns null
body: <p>I'm trying to upload images to my application but it always returns null. I'm unable to find the issue here. Can you help me out? Here's my code.</p>
  
  <p><strong>Model</strong></p>
  
  <hr>
  
  <pre><code>[Table("Slider")]
  public partial class Slider : BaseModel
  {
      [Required]
      [StringLength(200)]
      public string FileName { get; set; }
  
      [StringLength(200)]
      public string Title { get; set; }
  
      [StringLength(1000)]
      public string Description { get; set; }
  
      public int? Order { get; set; }
  }
  
  
  [NotMapped]
  public class SliderImage : Slider
  {
      public HttpPostedFileBase ImageFile { get; set; }
  }
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <hr>
  
  <pre><code>@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
  {
  @Html.AntiForgeryToken()
  &lt;div class="modal-body"&gt;
      &lt;div class="form-horizontal"&gt;
          @Html.ValidationSummary(true, "", new { @class = "text-danger" })
          @Html.HiddenFor(model =&gt; model.Id)
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.FileName, new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.TextBoxFor(model =&gt; model.FileName, new { @class = "form-control", @readonly = "readonly" })
                  @Html.ValidationMessageFor(model =&gt; model.FileName, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.ImageFile, new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.TextBoxFor(m =&gt; m.ImageFile, new { @class = "form-control", type = "file" })
                 //This is Same as below
                 //&lt;input class="form-control" id="ImageFile" name="ImageFile" type="file" value=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <hr>
  
  <pre><code>    public ActionResult Edit(int id)
      {
          Slider slider = _db.Sliders.Find(id);
          if (slider == null)
          {
              return HttpNotFound();
          }
          Mapper.CreateMap&lt;Slider, SliderImage&gt;();
          SliderImage sliderImage = Mapper.Map&lt;Slider, SliderImage&gt;(slider);
          return PartialView("_Edit", sliderImage);
      }
  
  
      [HttpPost]
      [ValidateAntiForgeryToken]
      public ActionResult EditSlider([Bind(Include = "Id,FileName,Title,Description,Order,IsActive,Name,ImageFile")] SliderImage sliderImage)
      {
          if (ModelState.IsValid)
          {
              Mapper.CreateMap&lt;SliderImage, Slider&gt;();
              Slider slider = Mapper.Map&lt;SliderImage, Slider&gt;(sliderImage);
              _db.Entry(slider).State = EntityState.Modified;
              _db.SaveChanges();
              return Json(new { success = true });
          }
          return PartialView("_EditSlider");
      }
  </code></pre>
  
  <p>What am I doing wrong i this?</p>
  
  <hr>
  
  <p><strong>Found The Issue</strong></p>
  
  <p>I'm binding the partial view inside the bootstrap modal popup. When I upload from the popup, the upload returning null. Instead if I open the partial View directly in browser, then the file is present in the model. So there is no problem with file upload. The problem is with modal popup or something. </p>
  
  <p>When Using Bootstrap model
  <img src="https://i.stack.imgur.com/f5Xjy.png" alt="When Using Bootstrap model"></p>
  
  <p>When using partial View Directy
  <img src="https://i.stack.imgur.com/2r3cT.png" alt="When using partial View Directy"></p>
  
  <p>Check the difference found when using fiddler between the Bootstrap Modal Submit and Using the partial View Directly in the following image respectively</p>
  
  <p><img src="https://i.stack.imgur.com/ZtkMB.png" alt="Comparison of Fiddler requests"></p>
  
  <p>When posting from the modal popup, the content type is changed to <code>application/x-www-form-urlencoded</code> where as when using the partial view directly it is <code>multipart/form-data</code></p>
  
  <hr>
  
  <p><strong>Found the root Issue.</strong></p>
  
  <pre><code>$('form', dialog).submit(function () {
                      var $form = $(this);
                      var enctype = $form.attr('id');
                      $.ajax({
                          url: this.action,
                          type: this.method,
                          data: $(this).serialize(),
                          success: function (result) {
                              if (result.success) {
                                  $('#myModal').modal('hide');
                                  //Refresh
                                  location.reload();
                              } else {
                                  $('#myModalContent').html(result);
                                  bindForm();
                              }
                          }
                      });
                      return false;
                  });
  </code></pre>
  
  <p>I'm using AJAX posting to submit the data from my form. When using <code>$(this).serialize()</code> the ajax success is being called but the file is not returning as the content type is different. How can I change this??</p>