Issue using ng-file-upload and http-auth-interceptor

[xeor]

http-auth-interceptor (https://github.com/witoldsz/angular-http-auth/blob/master/src/http-auth-interceptor.js) is a very small and popular way of intercepting API 401 messages, asking for authentication, and if ok, retries a queued up $http request.

When ng-file-upload triggers the 401, it breaks..

I think angular-http-auth tries to resend the waiting $http, but the object itself is not how it should, or it have been changed somehow..

The error I am getting is:

TypeError: Cannot read property 'addEventListener' of undefined
    at config.headers.__setXHR_ (vendor.js:85820)
    at vendor.js:19539
    at forEach (vendor.js:9636)
    at executeHeaderFns (vendor.js:19537)
    at mergeHeaders (vendor.js:19573)
    at $http (vendor.js:19450)
    at retryHttpRequest (vendor.js:85653)
    at Object.retryAll (vendor.js:85684)
    at Object.loginConfirmed (vendor.js:85587)
    at Authentication.setLoggedIn (_main.js:36)

Where vendor.js:85820 is https://github.com/danialfarid/ng-file-upload/blob/7.2.1/src/upload.js#L40

I have tried with Upload.upload, and Upload.http, a stripped down version of my Upload look like this;

file = @data.files && @data.files[0] || null
Upload.upload(
  {
    url: "#{baseUrl}/content/post/"
    fields: {data: 'data here'},
    file: file
    fileFormDataName: 'asset'
    headers: {
      'X-CSRFToken': $cookies.get('csrftoken')
    }
  })
  .success (data, status, headers, config) =>
    @okCreate()

The xhr object at upload.js#L40 looks like this when it doesnt work;

Object
fields: Object
file: null
fileFormDataName: "asset"
headers: Object
method: "POST"
paramSerializer: ngParamSerializer(params)
transformRequest: (data)
transformResponse: Array[1]
url: "/_/api/content/post/"
__proto__: Object

and like this when it works (ie, when I'm authenticated and not getting a 401 that http-auth-interceptor tries to queue up)..

XMLHttpRequest
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
onreadystatechange: null
ontimeout: null
readyState: 1
response: ""
responseText: ""
responseType: ""
responseURL: ""
responseXML: null
status: 0
statusText: ""
timeout: 0
upload: XMLHttpRequestUpload
withCredentials: false
__proto__: XMLHttpRequest

Any obvious thing I'm doing wrong? Or does this looks like a bug in ng-file-upload or http-auth-interceptor?

versions:

• 7.2.1 of ng-file-upload
• 1.2.1 of http-auth-interceptor
• 1.4.5 of angularjs

[danialfarid]

First fileFormDataName is deprecated in 7.2.1.
It seems like http-auth-interceptor is overwriting the XMLHttpRequest but it does not implement the xhr.upload causing this error, so you can open a bug on their side.

[xeor]

Thanks!

I'll fix the fileFormDataName and created an issue (witoldsz/angular-http-auth#113) on the other..

[alex-training]

Hi guys!
I have the same issue with TypeError: Cannot read property 'addEventListener' of undefined

When we use angular http interceptor we can "intercept" 401 status and save http-config of the last request

responseError: function(rejection) {
          case 401:
               var httpRequestConfig = rejection.config;

But if we want to retry to send THIS http-request again

$http(httpRequestConfig).then(successCallback, errorCallback);

unfortunately get the error message about 'addEventListener' of undefined

As you can see there are no any overwriting the XMLHttpRequest

[alex-training]

I have looked at the source code and IMHO there are some issues with

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);
}

and

    config.headers.__setXHR_ = function () {
      return function (xhr) {
        if (!xhr) 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);
      };
    };

[alex-training]

Hi again!
I've added example at https://jsfiddle.net/alexedu/4na60fpd/

Please have a look at it

[danialfarid]

Fixed at version 8.0.4