Pace.js An invalid or illegal string was specified

[EthianWong]

use Upload.upload() ,I promise the url and file is right, but upload is not work and throw error An invalid or illegal string was specified,who can tell me why?

[EthianWong]

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

[EthianWong]

at http://localhost:9002/bower_components/angular/angular.js:9754:17
    at forEach (http://localhost:9002/bower_components/angular/angular.js:331:20)
    at http://localhost:9002/bower_components/angular/angular.js:9752:7
    at sendReq (http://localhost:9002/bower_components/angular/angular.js:9613:9)
    at $get.serverRequest (http://localhost:9002/bower_components/angular/angular.js:9329:16)
    at processQueue (http://localhost:9002/bower_components/angular/angular.js:13168:27)
    at http://localhost:9002/bower_components/angular/angular.js:13184:27
    at Scope.$get.Scope.$eval (http://localhost:9002/bower_components/angular/angular.js:14381:28)
    at Scope.$get.Scope.$digest (http://localhost:9002/bower_components/angular/angular.js:14197:31)

[EthianWong]

var upload = function(file,event){
            file.upload = Upload.upload({
                url: 'upload/url',
                fields: {'username':"123"},
                file: file,
                sendFieldsAs: "form"
            });
            file.upload.then(function(){
                alert("end");
            });
        };
        $scope.fileSelected = function(file,event){
            if(file && file.length){
                upload(file,event);
            }
        }

[danialfarid]

Can you create a jsfiddle? What version of the plugin? What browser?

[EthianWong]

Actually ,I can't. Because this plugin not work when i use my project,But it's can work in a new seed project.So maybe something have conflict?Plugin's version is 5.0.9. and the brower is firefox.

[EthianWong]

angular version is 1.4.7

[EthianWong]

I use debug test , and i found the code only runing in the ng-file-upload.js and angular.js,but it's work if use new seed project .So i not sure is or isn't conflict problem

[danialfarid]

Then you need to create a jsfiddle or post your code with dependencies so I could investigate more.
If you are using a plugin that modifies XMLHttpRequest that could cause this problem.

[EthianWong]

I find the problem,It's PACE ,My framework default have this, remove this plugin and your plugin‘s can work. this plugin can auto load progress bar to the page,so this plugin maybe override the XMLHttpRequest. Thank you answer~ Internet need like you intentness people. finally i want know do you have to write compatible for the PACE.js in the fature?

[danialfarid]

If you could create a jsfiddle, showing the problem when pace.js is included, I will try to find a fix for it.

[dshep4]

I just had the same problem with pace and had to disable it too

[Fabbok1x]

Just had the same issue. Quickfix was at line 437 (pace.js) replace

window.XMLHttpRequest = function(flags) {

with

window.XMLHttpRequest_ = function(flags) {

and line 444 with

extendNative(window.XMLHttpRequest_, _XMLHttpRequest);

This does the trick, for the moment. (Tested with FF)
extendNative seems to be using prototype mutation, hence should be well supported in multiple browsers.
It's paradox anyways having a try catch

try {
        extendNative(window.XMLHttpRequest_, _XMLHttpRequest);
      } catch (_error) {}

while the error seemingly is not even expected to be dealt with and previously already overwriting the window.XMLHttpRequest function.

cheers

[danialfarid]

Cool find @Fabbok1x

[andrzejenne]

This fix is not working for me, it just disables proper pace functionality.
What was working:

• Backup XMLHttpRequest to a variable NativeXMLHttpRequest.
• After pace backup its XMLHttpRequest to a variable PaceXMLHttpRequest and restore NativeXMLHttpRequest to XMLHttpRequest.
• After ng-file-upload restore PaceXMLHttpRequest to XMLHttpRequest

[ulion]

@andrzejenne tried you way, once it not work (pace not detection, but upload work). after that, both work, no idea whether any random reason caused it.

[Tronix117]

New fix for those who want to get this working along pace without modifying directly its code.
Put this line after pace has been loaded:

XMLHttpRequest.prototype = Object.getPrototypeOf(new XMLHttpRequest);

[vishalmittal75]

@Tronix117 the fix you have suggested is not quite working for me. Could you provide any other pointers or where exactly you are including that line of code. Thanks.

[Tronix117]

@vishalmittal75 Right now, it's included this way directly at the <body> end.

<body>
  <!-- Some full screen loading placeholder here-->

  <script src="/plugins/pace/pace.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    XMLHttpRequest.prototype = Object.getPrototypeOf(new XMLHttpRequest);
  </script>

  <!-- Other JS script includes here -->
</body>

It solved any issues for me so far.

Version of Pace I'm using: 1.0.2

[vishalmittal75]

Thanks @Tronix117. Unfortunately that is not working for me. The other solution of making the change in the PACE library is working.

[krnlde]

@Tronix117 `s solution so far seems to work for us.

[Dufgui]

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

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

[nirav2410]

@Tronix117 thanks buddy, worked for me.