Input type file cannot get file name with file type in angularjs

Question

I am creating a web application in which I have an input field

<input type="file" ng-model="getfilename" />

and button

<button ng-click="clickfordetails()">Click Here!</button>

and the paragraph tag <P>{{file}}</p> when the user presses the button after entering the file from the input field, he should get the file name in{{file}}

and here is my controller for the same

$scope.clickfordetails=function() {
    $scope.file=$scope.getfilename;
}

but I can’t get the file name when I edit my controller on this

$scope.clickfordetails=function() {
    console.log($scope.getfilename);
}

the value in my console (google chrome) is Undefined

how do i need it?

Answer 1

Use the directive below

directive('customFileInput', [function () {
    return {
        link: function (scope, element, attrs) {
            element.on('change', function  (evt) {
                var files = evt.target.files;
                scope.filename=files[0].name
            });
        }
    }
}]);