FineUploader - add authentication in header

Question

I'm using FineUploader 3.7 in cross domain uploading project. Everything is fine until I move the code to client's DEV server which has simple authentication. Is there a way to embed authentication information in the form when the preflight request is sent to the server?

I have tried to embed basic auth in headers, however not working. Please refer to the code below:

$.ajaxSetup({
    headers: {
        'Authorization': "Basic YZVjaGFmbWluOkNieWxjBTY3"
    },
    beforeSend: function (jqXHR, settings) {
        jqXHR.setRequestHeader('Authorization', 'Basic YZVjaGFmbWluOkNieWxjBTY3');
    }
});

And even more, I have tried to set the custom header and no luck:

var manualuploader = new qq.FineUploader({
  customHeaders: {
    'Authorization': 'Basic YXVjaGFkbWluOkNieWxjZTY3'
  },....

Answer 1

Your customHeaders option isn't defined properly. customHeaders is a property of the request option, as detailed in the request option documentation.

Your Fine Uploader integration code should look like this instead:

var manualuploader = new qq.FineUploader({
    request: {
        endpoint: "path/to/your/server",
        customHeaders: {
            "Authorization": "Basic YXVjaGFkbWluOkNieWxjZTY3"
        }
    }
});

Also, please keep in mind that jQuery's ajaxSetup has no effect on Fine Uploader's ajax/xhr calls. Fine Uploader does not use jQuery at all internally. The optional jQuery plug-in offered by Fine Uploader simply wraps the native javascript library to allow it to be easily used as a jQuery plug-in by supporting syntax common associated with jQuery and jQuery plug-ins.

Also, please be aware that these headers will not be passed along with the upload request in IE9 and older, since IE9 and older do not support uploads via ajax/xhr. In those browsers, a form, targeting an iframe, is submitted. In the case of a form submit, there is no way to associate custom headers with the request.