AngularJS, Internet Explorer File Upload hanging a

Question

I have an unusual problem that only occurs with IE.

I have a file upload UI where the on-change event is hooked up to an Angular Directive that calls a web api service as so

 element.on('change', event => {
    scope.onChange();

    if (event.target.files.length > 0) {

        var fd = new FormData();
        fd.append('file', event.target.files[0]);

        $http.post('/api/upload', fd, {
                transformRequest: angular.identity,
                headers: { 'Content-Type': undefined },
            })
            .success(data => {
                scope.onSuccess({ data: data });
            })
            .error(data => {
                scope.onError({ data: data });
            });
    }
});

This works fine for Firefox and Chrome. It also works fine for IE unless I come back to the page and then wait for 60 seconds (works fine if I wait less than 60 seconds).

If i wait 60 seconds the onchange event is still fired and the post is attempted, however, the API service is never reached as the request is empty. This means that the xmlhttprequest just hangs:

Any ideas?

Answer 1

While the above fixes the issue for the period of time that you set it to it does mean a change to the registry. It is also a fudge rather than an actual fix to the problem.

Our problem was that the post wasn't being authenticated correctly and never came back.

Doing a GET before the POST forces the authentication and solves the issue

Update: This link gives info similar to the problem we had http://blogs.msdn.com/b/ieinternals/archive/2010/11/22/internet-explorer-post-bodies-are-zero-bytes-in-length-when-authentication-challenges-are-expected.aspx