angularjs internet-explorer angular-file-upload

Angular-File-Upload does not work with Internet Explorer

I am using Angular File Upload library.

https://github.com/nervgh/angular-file-upload

and I have been successful in implementing,works in all browsers except Internet Explorer. I am using Internet explorer 11 and I have implemented a fix suggested on the nervgh/afu site which includes a shim and sham file for older browsers. IE 11 isn't older but thought I'd give it a try.

The code is standard for the library so there really isn't anything to show. I do have this error now though but I don't know what it's telling me?

HTML1300: Navigation occurred.
File: precisionfarming
onAfterAddingAll [object Object]
"onAfterAddingAll"
[
  0: { },
  length: 1
]

onBeforeUploadItem [object Object]
"onBeforeUploadItem"
{
  [functions]: ,
  $$hashKey: "object:105",
  __proto__: { },
  _file: { },
  _input: null,
  alias: "file",
  disableMultipart: false,
  file: { },
  formData: [ ],
  headers: { },
  index: 1,
  isCancel: false,
  isError: false,
  isReady: true,
  isSuccess: false,
  isUploaded: false,
  isUploading: false,
  method: "POST",
  progress: 0,
  removeAfterUpload: false,
  uploader: { },
  url: "undefinedapi/UploadFiles",
  withCredentials: false
}

onProgressItem [object Object] 1
"onProgressItem"
{
  [functions]: ,
  $$hashKey: "object:105",
  __proto__: { },
  _file: { },
  _input: null,
  _xhr: { },
  alias: "file",
  disableMultipart: false,
  file: { },
  formData: [ ],
  headers: { },
  index: 1,
  isCancel: false,
  isError: false,
  isReady: true,
  isSuccess: false,
  isUploaded: false,
  isUploading: true,
  method: "POST",
  progress: 1,
  removeAfterUpload: false,
  uploader: { },
  url: "undefinedapi/UploadFiles",
  withCredentials: false
}
1

onProgressAll 1
onProgressItem [object Object] 100
"onProgressItem"
{
  [functions]: ,
  $$hashKey: "object:105",
  __proto__: { },
  _file: { },
  _input: null,
  _xhr: { },
  alias: "file",
  disableMultipart: false,
  file: { },
  formData: [ ],
  headers: { },
  index: 1,
  isCancel: false,
  isError: false,
  isReady: true,
  isSuccess: false,
  isUploaded: false,
  isUploading: true,
  method: "POST",
  progress: 100,
  removeAfterUpload: false,
  uploader: { },
  url: "undefinedapi/UploadFiles",
  withCredentials: false
}
100

onProgressAll 100
onCompleteItem [object Object] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>IIS 8.5 Detailed Error - 404.0 - Not Found</title> 
<style type="text/css"> 
<!-- 
body{margin:0;font-size:.7em;font-family:Verdana,Arial,Helvetica,sans-
serif;} 
code{margin:0;color:#006600;font-size:1.1em;font-weight:bold;} 
.config_source code{font-size:.8em;color:#000000;} 
pre{margin:0;font-size:1.4em;word-wrap:break-word;} 
ul,ol{margin:10px 0 10px 5px;} 
ul.first,ol.first{margin-top:5px;} 
fieldset{padding:0 15px 10px 15px;word-break:break-all;} 
.summary-container fieldset{padding-bottom:5px;margin-top:4px;} 
legend.no-expand-all{padding:2px 15px 4px 10px;margin:0 0 0 -12px;} 
legend{color:#333333;;margin:4px 0 8px -12px;_margin-top:0px; 
font-weight:bold;font-size:1em;} 
a:link,a:visited{color:#007EFF;font-weight:bold;} 
a:hover{text-decoration:none;} 
h1{font-size:2.4em;margin:0;color:#FFF;} 
h2{font-s
"onCompleteItem"
{
  [functions]: ,
  $$hashKey: "object:105",
  __proto__: { },
  _file: { },
  _input: null,
  _xhr: { },
  alias: "file",
  disableMultipart: false,
  file: { },
  formData: [ ],
  headers: { },
  index: null,
  isCancel: false,
  isError: true,
  isReady: false,
  isSuccess: false,
  isUploaded: true,
  isUploading: false,
  method: "POST",
  progress: 0,
  removeAfterUpload: false,
  uploader: { },
  url: "undefinedapi/UploadFiles",
  withCredentials: false
}
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>IIS 8.5 Detailed Error - 404.0 - Not Found</title> 
<style type="text/css"> 
<!-- 
body{margin:0;font-size:.7em;font-family:Verdana,Arial,Helvetica,sans-
serif;} 
code{margin:0;color:#006600;font-size:1.1em;font-weight:bold;} 
.config_source code{font-size:.8em;color:#000000;} 
pre{margin:0;font-size:1.4em;word-wrap:break-word;} 
ul,ol{margin:10px 0 10px 5px;} 
ul.first,ol.first{margin-top:5px;} 
fieldset{padding:0 15px 10px 15px;word-break:break-all;} 
.summary-container fieldset{padding-bottom:5px;margin-top:4px;} 
legend.no-expand-all{padding:2px 15px 4px 10px;margin:0 0 0 -12px;} 
legend{color:#333333;;margin:4px 0 8px -12px;_margin-top:0px; 
font-weight:bold;font-size:1em;} 
a:link,a:visited{color:#007EFF;font-weight:bold;} 
a:hover{text-decoration:none;} 
h1{font-size:2.4em;margin:0;color:#FFF;} 
h2{font-size:1.7em;margin:0;color:#CC000"
404
{
  [functions]: ,
  __proto__: { },
  cache-control: "private",
  content-length: "4935",
  content-type: "text/html; charset=utf-8",
  date: "Mon, 11 Dec 2017 18:34:14 GMT",
  persistent-auth: "true",
  server: "Microsoft-IIS/8.5",
  x-powered-by: "ASP.NET"
}

onCompleteAll

I'm really looking for someone that has had some success with this library in IE. I've also posted a question to the GIT site and will be happy to update this question if someone there can help me resolve the issue.

Solution

Okay, It turns out that the problem didn't have anything to do with the Angular-File-Upload library it was actually how different browsers get the host URL which I use to call a controller.

The Angular-File-Upload JavaScript code that defines the file uploader look lsike this...

var singleUploader = this.singleUploader = new FileUploader({
        url: baseURI + "api/UploadFiles",
        service: this.service,
        formValues: this.FormValues,            
    });

as you can see you can pass several properties from your controller into the FileUploader object to be used. The property that was tripping me up was "url".

I Chrome and FireFox

document.baseURI;

will return "http://hostname:port/nameofsite/" however in IE this does not work so I was passing in "undefined" which obviously will not work.

I changed my code as follows...

var baseURI = document.baseURI;
    if (baseURI == undefined) {
        baseURI = window.location.protocol + "//" + window.location.hostname 
+ (window.location.port ? ':' + window.location.port : '') + "/MySiteName/";

    };

    var singleUploader = this.singleUploader = new FileUploader({
        url: baseURI + "api/UploadFiles",
        service: this.service,
        formValues: this.FormValues,

    });

Now everything is happy and works!!