ng-model not working with file input [duplicate]

Question

This question already has an answer here:

• ng-model for `<input type=“file”/>` (with directive DEMO) 12 answers

I'm trying to get the value of file input and display it somewhere else, outside of the input. I'm using AngularJS v1.4.8 in the app.

<input type="file" ng-model="fileName" />
<div>{{fileName}}</div>

This approach works fine with type="text" but not with type="file".

Why is it so and how can I solve this problem?

Thank you!

Answer 1

Since my task was pretty straightforward, I decided to go another way:

html:

 <input type="file" file-input="files" />
 <ul>
     <li ng-repeat="file in files">{{file.name}}</li>
 </ul>

js:

.directive('fileInput', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {
            element.bind('change', function () {
                $parse(attributes.fileInput)
                .assign(scope,element[0].files)
                scope.$apply()
            });
        }
    };
}]);

This is actually a solution from this tutorial. Note that this can also work with multiple files.

Nevertheless there is nothing bad with Serghinho's alternative, there is just an easier way, I think.