Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-model not working with file input [duplicate]

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!

like image 337
Mitya Ustinov Avatar asked Jan 27 '16 11:01

Mitya Ustinov


1 Answers

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.

like image 92
Mitya Ustinov Avatar answered Nov 03 '22 14:11

Mitya Ustinov