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" />

Nufayl · Accepted Answer · 2017-02-16 11:46:00Z

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.

answered Feb 16, 2017 at 11:46

Nufayl

4946 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:46:09Z

0

for example, sing name or ID attribute:

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

CommunityBot

11 silver badge

answered Feb 28, 2014 at 17:30

bob.mazzo

5,78925 gold badges88 silver badges161 bronze badges

I was actually looking for an angular approach. I need to make comparisons with the filename in my angular controller.