4

I am creating a web app in which i have an input field

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

and a button

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

and a paragraph tag<P>{{file}}</p> when a user clicks on button after entering a file from 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 am unable to get the file name when i edit my controller to this

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

the value in my console(google chrome) is Undefined

how i need to do this??

Sai M.
  • 2,548
  • 4
  • 29
  • 46

1 Answers1

6

Use the below directive

directive('customFileInput', [function () {
    return {
        link: function (scope, element, attrs) {
            element.on('change', function  (evt) {
                var files = evt.target.files;
                scope.filename=files[0].name
            });
        }
    }
}]);
M14
  • 1,780
  • 2
  • 14
  • 31
  • where i need to use directive? –  Dec 23 '16 at 06:18
  • put the abode directive on your project then modify your input with on your controller you will get filename on variable '$scope.filename' – M14 Dec 23 '16 at 06:20
  • please upvote my question if you think it is a deserving one –  Dec 23 '16 at 06:26