2

In file upload ng-change is not working as expected in angularJS

<input type="file" ng-model="fileUpload" ng-change="setFiles(this) /"

JS:

$scope.setFiles=function(element){
    console.log(element.files);
}

Here element.files is undefined

But if i chage the ng-change to onchange it's working.

<input type="file" ng-model="fileUpload" onchange="angular.element(this).scope().setFiles(this)"/>

JS:

$scope.setFiles=function(element){
    console.log(element.files);
}

Here i'm getting the element.files object.

Why it is working in onchange not in ng-change?

Webfreaks
  • 113
  • 3
  • 7

2 Answers2

1

Angular doesn't seem to support binding for <input type="file"..../>. It seems like you have to create a directive... full details here. You can also try this library

Community
  • 1
  • 1
Simo Mafuxwana
  • 3,702
  • 6
  • 41
  • 59
  • Creating new directive or if i use onchange it's working fine but i have a question why it is not working in ng-change and the same function working in onchange. – Webfreaks Apr 02 '14 at 11:52
0
 <input type="file" id="file_upload_id_here" style="width:55%" name="file" onchange="angular.element(document.getElementById('file_upload_id_here')).scope().getFileDetailsCandidate(document.getElementById('file_upload_id_here'))" />

use like the above, some times the root scope is switchesm it cannot revert it current scope, on that this functionality will not works, so put your current document object like the above

Mahesan Rv
  • 318
  • 4
  • 4
  • One thing to watch out for: If you have turned off debugging info in AngularJS to gain performance, the scope() function is not going to return anything. For instance, I use app.config(['$compileProvider',function($compileProvider){ //$compileProvider.debugInfoEnabled(false); $compileProvider.commentDirectivesEnabled(false); $compileProvider.cssClassDirectivesEnabled(false); }]); whereby you can see that I commented out the debugInfoEnabled call so scope is available. – Newclique Mar 25 '19 at 20:39