AJAX file upload - HttpPostedFileBase parameter always null MVC 4

Question

I am trying to send a CSV file to a controller action via an AJAX request, however, the HttpPostedFileBase 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.

Here is my controller:

[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();
}

Here is my HTML:

<table class="fieldset">
    <tr>
        <td>Select File:</td>
        <td>
            <!--FILE TEXTFIELD-->
            <input type="file" id="file" name="file" class="hide file-upload" />

            <!--OVERLAY-->
            <div id="filename" class="file-textbox"></div>

            <!--ELIPSES-->
            <button id="filestyle" class="elipses button green-button">...</button>
        </td>
        <td>
            <!--UPLOAD-->
            <button type="button" id="btnUpload" class="button green-button upload">Upload</button>
            <div class="loading"></div>
        </td>
    </tr>
</table>

Here is my JS:

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);

Solution

You can read from Request.Files directly:

 var file = Request.Files[0];

or:

var file = Request.Files["file"];

where "file" is input element name

You may also want to read this post

Comments

[Tomuke]

It works using Request.Files[0]. But this still doesn't resolve the issue as to why the parameter is empty. Thanks for the temporary fix though! P.S I have tried all browsers.