I have an ajax request that is sending a file along with some other info. Everything except the file is the correct value, and the file is always null. I can't figure out why.

Here is the input I have included in the form:

<input type="file" id="file" runat="server"/>

On button click, it calls this function:

function ButtonClick() {
    var file = document.getElementById('file').files[0]; // correctly gets the file

    var formData = new FormData();
    formData.append('key1', 'val1');
    formData.append('key2', 'val2');
    formData.append('file', file, file.name);

    $.ajax({
        cache: false,
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function (data, textStatus, jqXHR) { closeWindow(); },
        timeout: 30000,
        type: 'POST',
        url: '<%= ResolveClientUrl("~/api/Example/ExampleUrl") %>'
    });
}

When I receive the request server-side, I get the following values:

var key1= HttpContext.Current.Request.Form["key1"]); // returns "val1"
var key2= HttpContext.Current.Request.Form["key2"]); // returns "val2"
var file= HttpContext.Current.Request.Form["file"]); // returns "null"

And when I take a look at HttpContext.Current.Request.Form, "file" is not in the request at all.