Question

Working XHR request that sends a file
with all required request headers set.

var upload = function (file) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/Admin/Upload', true);
    xhr.setRequestHeader('X-Filename', file.name);
    xhr.setRequestHeader('pageid', pageid);
    xhr.setRequestHeader('catid', catid);
    xhr.send(file);
}

Trying to get the below working (Using jQuery 1.7.2)

var xhr = new XMLHttpRequest();

var upload = function (file, xhr) {
    $.ajax
    ({
        url: '/Admin/Upload',
        beforeSend: function (xhr) {
            xhr.setRequestHeader('X-Filename', file.name);
            xhr.setRequestHeader('pageid', pageid);
            xhr.setRequestHeader('catid', catid);

        },
        data: file,
        success: function (data) {

            alert('Load was performed.');
        }

    });
}

Update:
Ok, so I have progressed a bit and the request now actually hits the action method,
however there is no data in the input stream and all the file key arrays are null,
so the actual file data does no appear to be going through. The request headers are coming through fine. The (data: file) is different I presume to xhr.send(file) ?

Now using this:

var upload = function (file) 
{
    $.ajax
    ({
        url: "/Admin/Upload",
        headers: { catid: catid, pageid: pageid },
        processData: false,
        data: file,
        success: function (data) {

            alert('Load was performed.');
        }

    });
}

Answer 1

Try also set contentType to false and type to 'POST'.

$.ajax({
    url: "/Admin/Upload",
    type: 'POST',
    headers: { catid: catid, pageid: pageid },
    processData: false,
    contentType: false,
    data: file,
    success: function (data) {
        alert('Load was performed.');
    }
});