Cleaner way to pass files of a file input with angular.js

Question

Below code combination works

$scope.onFileSelect = function(element) {

            alert("selam");
            console.log(element.files);
        };

<input type="file" class="file"  ng-model="filefoo"  multiple onchange="angular.element(this).scope().onFileSelect(this)"/>

But why i have to write a long expression:angular.element(this).scope().onFileSelect(this)

How can i write cleaner maybe like

<input type="file" class="file"  ng-model="filefoo"  multiple onchange="onFileSelect(this)"/>

michael · Accepted Answer · 2014-01-10 07:57:36Z

1

Angular is not aware of change events for file inputs. https://github.com/angular/angular.js/issues/1375. so one have to passe the event manually. Indeed this angular.element(this).scope().onFileSelect(this) looks very odd. I would suggest write a driective for this usecase that binds to the change event.

answered Jan 10, 2014 at 7:57

michael

16.4k8 gold badges57 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

merveotesi Over a year ago

do you mean, whatever i do even maybe with blueimp.github.io/jQuery-File-Upload/angularjs.html that i can not do something like $scope.$on("fileuploadchange", function(e,data){data.files... am i right?:: to clean something i do need a directive, and if there is already a directive in universe, you might know it? thanks for clear answer

michael Over a year ago

sorry i dont know bluimp - maybe tehy have solved this problem already in an angular way. "a directive in universe"? have never googled for this. one don't need mutch code for such a directive. and there is a feature request vor angular 1.3...

merveotesi Over a year ago

Thanks very much for answering again. I think my directives wont be clean so i wanted to ask if you know one, and if you advise that one. Anyway, yes i have learned blueimp has a angular directive too. i am going to make it run for my app. Thanks in advance.

user2445933 · Accepted Answer · 2014-01-10 07:58:43Z

1

The thing is, that angular.element(this).scope().onFileSelect(this) is a bit tricky way. onchange is a native DOM event, where scope is not avaialable and angular is a global variable, via which you can access it scope. You could access onFileSelect(this) if it would be ng-change directive, but input of type file doesn't support this directive for angular.

answered Jan 10, 2014 at 7:58

user2445933

Collectives™ on Stack Overflow

Cleaner way to pass files of a file input with angular.js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related