Angular IE9 fileupload is not working

Question

I use this way to upload file:

  <input type="file" 
         name="upload-file" 
         ng-model= "excelFile" 
         accept=".xlsx" 
         onchange="angular.element(this).scope().fileChanged(this);"
         required="true" 
  />

Create the fileChanged method in the controller

 $scope.fileChanged = function(files) {
     $scope.excelFile = files[0];
 };

It works in FireFox, Chrome IE10, IE11, but in IE9 it shows that the "files is null our undefined".

Are you uploading to the same domain or are you making a `cross-origin-request`? — singh1469, Aug 24 '14 at 14:09
http://caniuse.com/#search=file - the file API's you are probably trying to use don't work on IE9. You're going to have to find a library that comes with a shim to make it work. — Stephen, Aug 26 '14 at 15:53
I've used this library for file uploads and it works very well. There is a sample using AngularJS: https://github.com/blueimp/jQuery-File-Upload — Lee Willis, Aug 29 '14 at 09:49
Try Dropzone.js, http://www.dropzonejs.com/, it's a very useful library. — seeg, Sep 02 '14 at 07:51

score 3 · Answer 1 · edited May 23 '17 at 12:23

3

I faced the same issue when uploading image files. It worked fine in IE10 and later versions. Any version below 10 , file upload is not working. Refer this link

IE9Issue : File Upload using AngularJS

edited May 23 '17 at 12:23

Community

1
1

answered Sep 01 '14 at 12:15

Janaki Sathiyamurthy

578
1
5
21

score 2 · Answer 2 · answered Sep 02 '14 at 14:42

There is no way to use IE9 and below with the your method. You have two possible ways: 1. Use Flash uploader in case of IE9 and lower. Try to avoid this scenario 2. Use the http://malsup.com/jquery/form/ which will give you "some sort" of file access, as HTML 5 does :)

score 1 · Answer 3 · answered Dec 05 '14 at 11:58

As mentioned any method of file upload that uses FormData and File API stuff won't work in IE9 as they aren't available until IE10.

However, two angular modules that have a fallback method that will work with IE9 for uploading files that I know of are:

nervgh/angular-file-upload
danielfarid/angular-file-upload: however, it requires Flash to be installed for IE9 uploads

I am using nervgh/angular-file-upload as it does not require Flash.

score 0 · Answer 4 · edited Sep 01 '14 at 07:00

I think it is because in IE the event is in window.event, not passed in as parameter to the event handler. Therefore, the 'this' will be the doc root or undefined on IE.

You can easily test it by placing console.log(this) in event handler on IE. Check out the Event differences section in this article.

I think you can use a native angular directive ng-change, or just

$scope.$watch('excelFile', function(newVal){
// implementation
})

in the scope.

Angular IE9 fileupload is not working

4 Answers4

Linked