Show input file name in DOM using AngularJS

Question

I am trying to show the input file name in a readonly text box.

As can be seen this is different from the custom input file of HTML.

So, I tried this.

<input type="text" readonly ng-model="name">. 
<input style="display: none" id="upload" type="file" accept=".csv" onchange="angular.element(this).scope().fileNameChange(this)">
<button type="button" ng-click="clickUpload()">Browse</button>

$scope.fileNameChange = function(e) {
        $scope.name=e.files[0].name
    }
    $scope.clickUpload = function(){
        angular.element('#upload').trigger('click');
    };

With this logic, say I first select 'inputFile1.csv', nothing is shown in the textbox.

Then I select another file 'inputFile2.csv', now 'inputFile1.csv' is shown in textbox.

Where am I going wrong? Also, is this the best way to implement this functionality?

Answer 1

Try this:

<input type="text" readonly ng-model="name">. 
<input style="display: none" id="upload" type="file" accept=".csv" onchange="angular.element(this).scope().fileNameChange(this)">
<button type="button" ng-click="clickUpload()">Browse</button>

$scope.fileNameChange = function(e) {
   // let the DOM process before letting angular do its thing
   $timeout(function() {
      $scope.name=e.files[0].name
   });
}
$scope.clickUpload = function(){
   angular.element('#upload').trigger('click');
};