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.
The file should be accessible via
HttpContext.Current.Request.Files["file"]