jQuery BlueImp文件上传授权

Question

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.

Answer 1

This may be a little old however, people may run into this in the future. There is an option for including headers. It is treated just like all of the other options: ie all that is needed is update options with the headers you would like in the "headers" object on the options object.