I am trying to implement the jQuery Bluimp File Upload control (from here: https://github.com/blueimp/jQuery-File-Upload) with an ASP.NET WebAPI backend, but having a little trouble. The backend will eventually support mobile apps, so it is already enabled for CORS via this (in the Register method of WebApiConfig):
config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
The entire backend is locked down with an authentication handler that is overriding the SendAsync method to look at request.Headers.Authorization, pull out the parameter and authenticate the request which is where my issue lies. No matter what I try (including from this SO link: jQuery-File-Upload by blueimp - additional headers), I can't get the control to send the headers to the backend, thereby preventing me from authenticating the upload request before allowing it to save. The various methods I've tried are:
$(function() {
$('#fileupload').fileupload({
add: function(e, data) {
data.headers = {
'Authorization': 'Basic ' + $.cookie('auth')
};
data.submit();
},
headers: {
Authorization: 'Basic ' + $.cookie('auth')
},
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", 'Basic ' + $.cookie('auth'));
},
xhrFields: {
"Authorization": 'Basic ' + $.cookie('auth')
},
requestHeaders: {
"Authorization": 'Basic ' + $.cookie('auth')
},
singleFileUploads: false,
dataType: 'jsonp',
url: window.core.get_serverUrl() + 'upload/uploadcasefile',
done: function(e, data) {
$.each(data.result.files, function(index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
Any ideas on how to force this thing to send the headers? Ultimately I'm just trying to implement a drag/drop file upload and don't even need most of the features of this control, but it seemed like it had some nice options. If I could just get it to send the headers, I think I'd be set.
