search

danialfarid / ng-file-upload

Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support
MIT License
7.87k stars 1.59k forks source link

Header values not matching to RFC 7230, will be deprecated (see: https://www.chromestatus.com/feature/6457425448140800). #1181

Closed 4ndreea closed 8 years ago

4ndreea commented 8 years ago

Hi I receive a warning in Chrome and an error in Safari

The warning in Chrome - Version 47.0.2526.73 (64-bit) - is:

Header values not matching to RFC 7230, will be deprecated 
(see: https://www.chromestatus.com/feature/6457425448140800).

The error in Safari - - Version 9.0.1 (11601.2.7.2) - is:

Error: SyntaxError: DOM Exception 12
setRequestHeader@[native code]
http://localhost/bower_components/ng-file-upload/ng-file-upload.js:18:19
http://localhost/bower_components/angular/angular.js:9808:33
forEach@http://localhost/bower_components/angular/angular.js:331:24
http://localhost/bower_components/angular/angular.js:9806:14
sendReq@http://localhost/bower_components/angular/angular.js:9667:21
serverRequest@http://localhost/bower_components/angular/angular.js:9383:23
processQueue@http://localhost/bower_components/angular/angular.js:13248:29
http://localhost/bower_components/angular/angular.js:13264:39
$eval@http://localhost/bower_components/angular/angular.js:14466:28
$digest@http://localhost/bower_components/angular/angular.js:14282:36
$apply@http://localhost/bower_components/angular/angular.js:14571:31
done@http://localhost/bower_components/angular/angular.js:9698:53
completeRequest@http://localhost/bower_components/angular/angular.js:9888:15
requestLoaded@http://localhost/bower_components/angular/angular.js:9829:24
(anonymous function)angular.js:11654
(anonymous function)angular.js:8595
processQueueangular.js:13255
(anonymous function)angular.js:13263
$evalangular.js:14465
$digestangular.js:14281
$applyangular.js:14570
doneangular.js:9697
completeRequestangular.js:9887
requestLoadedangular.js:9828

it reffers to this line orig.apply(this, arguments); from ng-file-upload.js file

code snippet from there:

if (window.XMLHttpRequest && !(window.FileAPI && FileAPI.shouldLoad)) {
  window.XMLHttpRequest.prototype.setRequestHeader = (function (orig) {
    return function (header, value) {
      if (header === '__setXHR_') {
        var val = value(this);
        // fix for angular < 1.2.0
        if (val instanceof Function) {
          val(this);
        }
      } else {
        orig.apply(this, arguments);
      }
    };
  })(window.XMLHttpRequest.prototype.setRequestHeader);
}
danialfarid commented 8 years ago

What version of the plugin are you using? Also post your code here.

danialfarid commented 8 years ago

Could be a conflict with other plugin or you are setting FileAPI to be run or html5:false.

danialfarid commented 8 years ago

What version of angular are you using? Are you testing the demo page or your own code?

frekele commented 8 years ago

Google Chrome 32bits Versão 47.0.2526.106 m angular 1.4.8 and more.

Header values not matching to RFC 7230, will be deprecated (see: https://www.chromestatus.com/feature/6457425448140800). ng-file-upload.js:18

chrome

error

error2

bower.json

{
    "name": "***",
    "dependencies": {
        "jquery": "~2.1.4",
        "jquery-ui": "~1.11.4",
        "angular": "~1.4.8",
        "angular-resource": "~1.4.8",
        "angular-cookies": "~1.4.8",
        "angular-sanitize": "~1.4.8",
        "angular-route": "~1.4.8",
        "angular-animate": "~1.4.8",
        "angular-aria": "~1.4.8",
        "angular-touch": "~1.4.8",
        "angular-i18n": "~1.4.8",
        "angular-messages": "~1.4.8",
        "angular-message-format": "~1.4.8",
        "font-awesome": "~4.5.0",
        "toastr": "~2.1.0",
        "seiyria-bootstrap-slider": "~5.3.0",
        "bootstrap": "~3.3.0",
        "bootstrap-file-input": "~1.0.0",
        "jquery.easy-pie-chart": "~2.1.0",
        "morris.js": "~0.5.0",
        "jquery.slimscroll": "~1.3.0",
        "gauge.js": "~1.2.0",
        "jquery-spinner": "~0.2.0",
        "jquery-steps": "~1.1.0",
        "angular-wizard": "~0.5.0",
        "weather-icons": "~2.0.0",
        "textAngular": "~1.4.0",
        "rangy": "~1.3.0",
        "angular-ui-tree": "~2.11.0",
        "ngmap": "~1.15.0",
        "flot": "~0.8.0",
        "flot.tooltip": "~0.8.0",
        "ng-tags-input": "~3.0.0",
        "underscore": "~1.8.0",
        "jshashes": "~1.0.0",
        "jquery-sparkline": "~2.1.0",
        "skycons": "master",
        "jqvmap": "~1.4.0",
        "angular-toastr": "~1.6.0",
        "angular-loading-bar": "~0.8.0",
        "angular-block-ui": "~0.2.0",
        "detectizr": "master",
        "angular-local-storage": "~0.2.0",
        "angular-xeditable": "~0.1.0",
        "moment": "~2.10.0",
        "moment-timezone": "0.4.0",
        "angular-moment": "~1.0.0",
        "angular-ui-validate": "~1.2.0",
        "angular-ui-indeterminate": "~1.0.0",
        "angular-ui-mask": "~1.6.0",
        "angular-ui-event": "~1.0.0",
        "angular-ui-scrollpoint": "~2.0.0",
        "angular-ui-scroll": "~1.3.0",
        "angular-ui-uploader": "~1.1.0",
        "angular-bootstrap": "~0.14.0",
        "angular-ui-router": "~0.2.0",
        "angular-ui-slider": "~0.1.0",
        "angular-ui-sortable": "~0.13.0",
        "angular-ui-select": "~0.13.0",
        "angular-recaptcha": "~2.2.0",
        "cpf_cnpj": "~0.0.4",
        "ng-file-upload": "~11.0.0",
        "blob": "master",
        "canvas-to-Blob.js": "master",
        "file-saver": "master",
        "angular-file-saver": "~1.0.0",
        "angular-input-masks": "~2.1.0",
        "angular-easy-masks": "~0.2.0",
        "ngInfiniteScroll": "~1.2.0",
        "Keypress": "~2.1.0",
        "loadcss": "~0.2.0",
        "ionicons": "~2.0.0",
        "octicons": "~3.3.0",
        "map-icons": "~3.0.0",
        "entypo": "master",
        "typicons": "~2.0.0",
        "icomoon": "~0.1.0",
        "custom-font-icons": "master",
        "angular-scroll": "~1.0.0",
        "angular-translate": "~2.8.0",
        "angular-translate-loader-static-files": "~2.8.0"
    },
    "devDependencies": {
        "holderjs": "~2.9.0",
        "bootstrap-sass": "~3.3.0"
    },
    "resolutions": {
        "angular": "~1.4.8 <1.5.0",
        "jquery": "~2.1.4",
        "jquery-ui": "~1.11.4"
    }
}

index.html


<!doctype html>
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>*</title>
    <meta name="description" content="">
    <meta name="robots" content="noindex,nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <script src="bower_components/loadcss/loadCSS.js"></script>
    <script src="bower_components/loadcss/onloadCSS.js"></script>

    <script>loadCSS("https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic");</script>

    <!-- build:css styles/icons-style.css -->
    <!--CSS ICONES-->
    <link rel="stylesheet" href="bower_components/custom-font-icons/custom-font-icons.css">
    <link rel="stylesheet" href="bower_components/ionicons/css/ionicons.css">
    <link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css">
    <link rel="stylesheet" href="bower_components/map-icons/dist/css/map-icons.css">
    <link rel="stylesheet" href="bower_components/entypo/font/entypo.css">
    <link rel="stylesheet" href="bower_components/typicons/src/font/typicons.css">
    <link rel="stylesheet" href="bower_components/icomoon/style.css">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.css">
    <!-- endbuild -->

    <!-- build:css styles/ui-style.css -->
    <!--CSS UI COMPONENTS-->
    <link rel="stylesheet" href="bower_components/textAngular/src/textAngular.css">
    <link rel="stylesheet" href="bower_components/angular-toastr/dist/angular-toastr.min.css">
    <link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.min.css">
    <link rel="stylesheet" href="bower_components/angular-block-ui/dist/angular-block-ui.min.css">
    <link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.min.css">
    <!-- endbuild -->

    <link rel="stylesheet" href="styles/main.css">

</head>
<body data-ng-app="app"
      id="app"
      data-custom-background
      data-off-canvas-nav
      data-ng-controller="AppCtrl">

<!--[if lt IE 9]>
<p class="browsehappy">Você está usando um navegador <strong>desatualizado</strong>. Por favor <a href="http://browsehappy.com/">atualize seu navegador</a> para melhorar a sua
    experiência.</p>
<![endif]-->

<div>
    <div data-ng-hide="isSpecificPage()"
         data-ng-cloak
         class="no-print">

        <section
            data-ng-cloak
            data-ng-include="topHeader"
            id="header"
            class="top-header"></section>

        <aside
            data-ng-cloak
            data-ng-include="navContainer"
            id="nav-container"></aside>

    </div>

    <div class="view-container">
        <section data-ng-view id="content" class="animate-fade-up"></section>
    </div>
</div>

<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=vcRecaptchaApiLoaded" defer="defer" async></script>
<!--script src="https://maps.google.com/maps/api/js?sensor=false"></script-->

<!-- build:js scripts/vendor.js -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload-shim.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<!--<script src="bower_components/angular-resource/angular-resource.min.js"></script>-->
<!--<script src="bower_components/angular-touch/angular-touch.min.js"></script>-->
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<!--<script src="bower_components/angular-message-format/angular-message-format.min.js"></script>-->
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/underscore/underscore-min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src="bower_components/angular-scroll/angular-scroll.min.js"></script>
<script src="bower_components/angular-block-ui/dist/angular-block-ui.min.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload.js"></script>
<!--script src="bower_components/bootstrap-file-input/bootstrap.file-input.js"></script-->
<!-- endbuild -->

<!-- build:js scripts/ui-part1.js -->
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/jquery-spinner/dist/js/jquery.spinner.js"></script>
<script src="bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>
<script src="bower_components/jquery-steps/build/jquery.steps.min.js"></script>
<!--script src="bower_components/toastr/toastr.min.js"></script-->
<script src="bower_components/angular-toastr/dist/angular-toastr.tpls.min.js"></script>
<!-- endbuild -->

<!-- build:js scripts/ui-part2.js -->
<script src="bower_components/jquery.slimscroll/jquery.slimscroll.min.js"></script>
<script src="bower_components/holderjs/holder.js"></script>
<script src="bower_components/raphael/raphael-min.js"></script>
<script src="bower_components/morris.js/morris.js"></script>
<script src="bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<script src="bower_components/flot/jquery.flot.js"></script>
<script src="bower_components/flot/jquery.flot.resize.js"></script>
<script src="bower_components/flot/jquery.flot.pie.js"></script>
<script src="bower_components/flot/jquery.flot.stack.js"></script>
<script src="bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js"></script>
<script src="bower_components/flot/jquery.flot.time.js"></script>
<script src="bower_components/gauge.js/dist/gauge.min.js"></script>
<script src="bower_components/jquery.easy-pie-chart/dist/angular.easypiechart.min.js"></script>
<script src="bower_components/angular-wizard/dist/angular-wizard.min.js"></script>
<script src="bower_components/textAngular/dist/textAngular-rangy.min.js"></script>
<script src="bower_components/textAngular/dist/textAngular-sanitize.min.js"></script>
<script src="bower_components/textAngular/dist/textAngular.min.js"></script>
<script src="bower_components/skycons/skycons.js"></script>
<script src="bower_components/angular-ui-tree/dist/angular-ui-tree.min.js"></script>
<script src="bower_components/ngmap/build/scripts/ng-map.min.js"></script>
<script src="bower_components/jqvmap/dist/jquery.vmap.min.js"></script>
<script src="bower_components/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="bower_components/jqvmap/dist/maps/jquery.vmap.usa.js"></script>
<script src="bower_components/jqvmap/dist/maps/jquery.vmap.europe.js"></script>
<script src="bower_components/jqvmap/dist/maps/jquery.vmap.brazil.js"></script>
<script src="bower_components/ng-tags-input/ng-tags-input.min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js"></script>
<!-- endbuild -->

<!-- build:js scripts/ui-part3.js -->
<script src="bower_components/moment/min/moment-with-locales.js"></script>
<script src="bower_components/moment-timezone/builds/moment-timezone-with-data.js"></script>
<script src="bower_components/angular-moment/angular-moment.js"></script>
<script src="scripts/jstz/jstz.js"></script>
<script src="bower_components/jshashes/hashes.min.js"></script>
<!--<script src="bower_components/modernizr/bin/modernizr.js"></script>-->
<script src="bower_components/detectizr/dist/detectizr.js"></script>

<!--inicio angular-ui-utils-->
<script src="bower_components/angular-ui-validate/dist/validate.min.js"></script>
<script src="bower_components/angular-ui-indeterminate/dist/indeterminate.min.js"></script>
<script src="bower_components/angular-ui-mask/dist/mask.min.js"></script>
<script src="bower_components/angular-ui-event/dist/event.min.js"></script>
<script src="bower_components/angular-ui-scrollpoint/dist/scrollpoint.min.js"></script>
<script src="bower_components/angular-ui-scroll/dist/ui-scroll.min.js"></script>
<script src="bower_components/angular-ui-uploader/dist/uploader.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-ui-slider/src/slider.js"></script>
<script src="bower_components/angular-ui-sortable/sortable.min.js"></script>
<script src="bower_components/angular-ui-select/dist/select.min.js"></script>
<!--fim angular-ui-utils-->

<script src="bower_components/angular-i18n/angular-locale_pt-br.js"></script>
<script src="bower_components/angular-recaptcha/release/angular-recaptcha.min.js"></script>
<script src="bower_components/cpf_cnpj/build/cpf_cnpj.min.js"></script>
<script src="bower_components/blob/Blob.js"></script>
<script src="bower_components/canvas-to-Blob.js/canvas-toBlob.js"></script>
<script src="bower_components/file-saver/FileSaver.min.js"></script>
<script src="bower_components/angular-file-saver/dist/angular-file-saver.min.js"></script>
<script src="bower_components/angular-input-masks/angular-input-masks-dependencies.min.js"></script>
<script src="bower_components/angular-input-masks/angular-input-masks.min.js"></script>
<script src="bower_components/angular-easy-masks/release/angular-easy-masks.min.js"></script>

<script src="bower_components/Keypress/keypress.js"></script>
<!-- endbuild -->

<!-- build:js({.tmp,client}) scripts/app.js -->
...............
<!-- endbuild -->

</body>
</html>
danialfarid commented 8 years ago

Does the demo page work? If the demo page works it could be a conflict with another library that modifies XMLHttpRequest. Try to narrow down the problem by removing the libraries and have a simple code. That could help.

mikelax commented 8 years ago

I am also receiving this warning in Chrome. Chrome version - 47.0.2526.106 (64-bit) ng-file-upload version - 11.0.0 angular - 1.4.8

willianribeiro commented 8 years ago

This is in reason of that: https://www.chromestatus.com/feature/6457425448140800.

I had problem in Safari 9.0.1 (with another framework, not the ng-file-upload). There was a whitespace in one of the headers request, and it broke the application.

danialfarid commented 8 years ago

You should try to narrow down the issue by creating a jsfiddle. This is most probably a conflict with another library.

nazar commented 8 years ago

I was experiencing the same issue in bower_components/ng-file-upload/ng-file-upload.js:18:19 with Safari but ng-file-upload was not the direct cause of this.

The cause was our code setting an invalid Header value - we were assigning a single space character as a header value. The stack trace leads to ng-file-upload due to the window.XMLHttpRequest.prototype.setRequestHeader override - but that isn't the cause of the error.