Failed to execute 'setRequestHeader' on 'XMLHttpRequest':

[Nabomita]

I am getting this error:

Error: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function (xhr) {
config.__XHR = xhr;
xhr.upload.addEventListener('progress', function(e) {
if (config.progress) {
$timeout(function() {
config.progress(e);
});
}
}, false);
//fix for firefox not firing upload progress end, also IE8-9
xhr.upload.addEventListener('load', function(e) {
if (e.lengthComputable) {
$timeout(function() {
config.progress(e);
});
}
}, false);
}' is not a valid HTTP header field value.
at http://localhost:8282/lifeengage-groupuw-ui/resources/js/angular/angular.js:7855:17
at forEach (http://localhost:8282/lifeengage-groupuw-ui/resources/js/angular/angular.js:307:20)
at http://localhost:8282/lifeengage-groupuw-ui/resources/js/angular/angular.js:7853:7
at sendReq (http://localhost:8282/lifeengage-groupuw-ui/resources/js/angular/angular.js:7721:9)
at $http.serverRequest (http://localhost:8282/lifeengage-groupuw-ui/resources/js/angular/angular.js:7455:16)
at wrappedCallback (http://localhost:8282/lifeengage-groupuw-ui/resources/js/angular/angular.js:10696:81)
at wrappedCallback (http://localhost:8282/lifeengage-groupuw-ui/resources/js/angular/angular.js:10696:81)
at http://localhost:8282/lifeengage-groupuw-ui/resources/js/angular/angular.js:10782:26
at Scope.$eval (http://localhost:8282/lifeengage-groupuw-ui/resources/js/angular/angular.js:11697:28)
at Scope.$digest (http://localhost:8282/lifeengage-groupuw-ui/resources/js/angular/angular.js:11525:31) angular.js:9199

[danialfarid]

include angular-file-upload-shim.js file before angular.js

[ckken]

any other answer

[danialfarid]

@ckken this is a closed issue if you have the same issue post your html here.

[Pirozek]

Hi, I have got the same issue:

Error: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function (xhr) {
          if (!xhr || !(xhr instanceof XMLHttpRequest)) return;
          config.__XHR = xhr;
          if (config.xhrFn) config.xhrFn(xhr);
          xhr.upload.addEventListener('progress', function (e) {
            e.config = config;
            notifyProgress(getNotifyEvent(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;
              notifyProgress(getNotifyEvent(e));
            }
          }, false);
        }' is not a valid HTTP header field value.

I am using latest version of ng-file-upload and angular 1.5.0 (but tested it with 1.4.7 too, same error). I just copied the example, so my HTML of directive with upload looks like:

<div>
    <label>{{field.label}} <span ng-if="field.required" class="text-red">*</span></label>

    <p ng-show="field.help">
      {{field.help}}
    </p>

    Drop File:
    <div ngf-drop ngf-select ng-model="files" class="drop-box"
         ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true"
         accept="image/*,application/pdf"
         ngf-pattern="'image/*,application/pdf'">Drop pdfs or images here or click to upload</div>
    <div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>

    Files:
    <ul>
        <li ng-repeat="f in files">{{f.name}} {{f.$error}} {{f.$errorParam}}</li>
    </ul>

    Upload Log:
    <pre>{{log}}</pre>
</div>

My upload service:

scope.$watch('files', function() {
                scope.upload(scope.files);
            });

            scope.log = '';

            scope.upload = function(files) {
                if (files && files.length) {
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        if (!file.$error) {
                            Upload.upload({
                                url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                                data: {
                                    file: file
                                }
                            }).progress(function(evt) {
                                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                                scope.log = 'progress: ' + progressPercentage + '% ' +
                                    evt.config.data.file.name + '\n' + scope.log;
                            }).success(function(data, status, headers, config) {
                                $timeout(function() {
                                    scope.log = 'file: ' + config.data.file.name + ', Response: ' + JSON.stringify(data) + '\n' + scope.log;
                                });
                            });
                        }
                    }
                }
            };

And I am including shim before angular.js:

<script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>

<script type="text/javascript" src="vendor/datatables/media/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="vendor/ng-file-upload/ng-file-upload-shim.min.js"></script>

<script type="text/javascript" src="vendor/angular/angular.js"></script>

...

<script type="text/javascript" src="vendor/ng-file-upload/ng-file-upload.js"></script>

<script type="text/javascript" src="src/app/app.js"></script>

<script type="text/javascript" src="src/app/client/client.js"></script>

Any idea what could be wrong?

[danialfarid]

Could be a conflict with another library, try to create a jsfiddle showing the error that would help figuring out the issue.

[Pirozek]

Ok I found out that the problem was caused by PACE library (http://github.hubspot.com/pace/docs/welcome/)

Thanks for hint :)

[Pirozek]

Ok, this fix from @Fabbok1x seems to be working - #832

[Dufgui]

I have the same problem and my dep are injected via gulp so...i create a small patch as describe in #832

Bower : pace-ng-file-upload-inlinepatch 0.0.6
https://github.com/Dufgui/pace-ng-file-upload-patch

[mykytanikitenko]

I have archaic socket.io 1.2 and for some reasons can't change this.

According to source code

ng-file-upload/src/upload.js

Line 69 in 750068e

if (!config.disableProgress) {

The possible workaround is Upload.upload({ ... disableProgress: true });