Get form input filename using AngularJS

Question

I am trying to check the name of the file before the user hits submit. Can I get the filename like we get the content of the input field?

Something like:

<input name="posterTitle" type="text" ng-model="posterTitle">
{{posterTitle}}

Similarly in:

<input name="posterFileName" ng-model="posterFileName" type="file" />

Answer 1

Using Angularjs you might need to use an onchange event to bind the input name inside controller. see the example :

<input name="posterFileName" type="file" onchange="angular.element(this).scope().fileName(this)"/>

Inside controller

$scope.fileName= function(element) {
   $scope.$apply(function($scope) {
      $scope.posterTitle= element.files[0].name;
   });
};

Hope this will help.

Answer 2

a couple of links I've found that may help a bit: http://api.jquery.com/file-selector/ jQuery: get the file name selected from <input type="file" />

for example, sing name or ID attribute:

$('input[type=file]').change(function(e){ $in=$(this); $in.next().html($in.val()); });