angular-file-upload-shim does not work correctly on Chrome - Failed to execute 'setRequestHeader' on 'XMLHttpRequest'

When I try to upload a file, I get this error:

Error: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function (xhr) {
            if (!xhr) return;
            config.__XHR = xhr;
            config.xhrFn && config.xhrFn(xhr);
            xhr.upload.addEventListener('progress', function(e) {
                e.config = config;
                deferred.notify ? deferred.notify(e) : promise.progress_fn && $timeout(function(){promise.progress_fn(e)});
            }, false);
            //fix for firefox not firing upload progress end, also IE8-9
            xhr.upload.addEventListener('load', function(e) {
                if (e.lengthComputable) {
                    e.config = config;
                    deferred.notify ? deferred.notify(e) : promise.progress_fn && $timeout(function(){promise.progress_fn(e)});
                }
            }, false);
        }' is not a valid HTTP header field value.

What I figured out is that $upload sets a fake header called __setXHR_ and angular-file-upload-shim patches some methods to manage the fake header here:

patchXHR('setRequestHeader', function(orig) {
    return function(header, value) {
        if (header === '__setXHR_') {
            initializeUploadListener(this);
            var val = value(this);
            // fix for angular < 1.2.0
            if (val instanceof Function) {
                val(this);
            }
        } else {
            this.__requestHeaders = this.__requestHeaders || {};
            this.__requestHeaders[header] = value;
            orig.apply(this, arguments);
        }
    }
});

The problem is that angular-file-upload-shim conditionally executes most of its code:

 if ((window.XMLHttpRequest && !window.FormData) || (window.FileAPI && FileAPI.forceLoad))

And at least in my browser (Chrome 40.0.2214.93 for Linux), window.FormData is set, and window.FileAPI is not, so the condition isn’t met.

In summary:

• The fake header is set
• The patched XHR function that would process the fake header is not set.
• The core javascript libraries cannot process the fake header and everything stops working

Versions:

• angular 1.3.12
• ng-file-upload 3.0.7

[TheFabio]

Loading “ng-file-upload.js” before loading “pace.js” fixed the issue for me.

[pradt]

Hi, how did you guys work out that it is was Pace.js ? I’m not using pace.js but I’m receiving this error, and trying to work out what is the conflict.