title: AJAX file upload - HttpPostedFileBase parameter always null MVC 4
body: <p>I am trying to send a CSV file to a controller action via an AJAX request, however, the <code>HttpPostedFileBase</code> parameter is always null. Therefore, I am unable to access the contents of the file I am trying to send. Please can someone tell me where I am going wrong to resolve this.</p>
  
  <p>Here is my controller:</p>
  
  <pre><code>[HttpPost]
  public ActionResult ImportCSV(HttpPostedFileBase file)
  {
      var files = Request.Files.Count; // This returns 1. However, 'file' parameter is null
  
      // Process the CSV file here...
  
      return View();
  }
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;table class="fieldset"&gt;
      &lt;tr&gt;
          &lt;td&gt;Select File:&lt;/td&gt;
          &lt;td&gt;
              &lt;!--FILE TEXTFIELD--&gt;
              &lt;input type="file" id="file" name="file" class="hide file-upload" /&gt;
  
              &lt;!--OVERLAY--&gt;
              &lt;div id="filename" class="file-textbox"&gt;&lt;/div&gt;
  
              &lt;!--ELIPSES--&gt;
              &lt;button id="filestyle" class="elipses button green-button"&gt;...&lt;/button&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;!--UPLOAD--&gt;
              &lt;button type="button" id="btnUpload" class="button green-button upload"&gt;Upload&lt;/button&gt;
              &lt;div class="loading"&gt;&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is my JS:</p>
  
  <pre><code>var UploadModule = (function ($) {
  
  "use strict";
  
  var btnElipses;
  var btnChangeUpload;
  var btnUpload;
  var Files = {};
  
  var init = function () {
      btnElipses = $(".elipses");
      btnChangeUpload = $(".file-upload");
      btnUpload = $(".upload");
  
      bindEvents();
  };
  
  var bindEvents = function () {
      btnElipses.on("click", browse);
      btnChangeUpload.on("change", change);
      btnUpload.on("click", upload);
  };
  
  var upload = function (e) {
  
      // Prevent default actions
      e.stopPropagation();
      e.preventDefault();
  
      // The file object is passed through in the event (hopefully)
      var csv = new FormData();
  
      // Get file and append to form data
      $.each(Files["csv"], function (key, value) {
          csv.append(key, value);
      });
  
      // Send file
      $.ajax({
          url: '/Factors/ImportCSV',
          type: 'POST',
          data: csv,
          dataType: "json",
          cache: false,
          contentType: false,
          processData: false,
  
          success: function (data) {
              //Handle success
          },
          error: function (xhr, status, errorThrown) {
              //Handle error
          }
      });
  };
  
  var browse = function (e) {
      $('#file').click();
  };
  
  var change = function (e) {
      // Set file name overlay to name of file
      $('#filename').text($(e.target).val().split('\\').pop());
  
      // Set value of csv to the file
      Files["csv"] = e.target.files;
  };
  
  init();
  
  })(jQuery);
  </code></pre>