How to alert the path name?

Question

I need to alert the path name by clicking the link tag but it's not working for me. Since I am new to angular I am confused about where I went wrong. Can somebody help me with this?

Here is my index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@2.0.0-alpha.20" data-semver="2.0.0-alpha.20" src="https://code.angularjs.org/2.0.0-alpha.20/angular.js"></script>

    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="ProductCtrl">
    <form name="frmMain" id="frmMain">
      <input type="file" name="myFile" id="myFile" />
      <a href="#" ngclick="showFileName()">Show Name</a>
    </form>
<script>
var myApp = angular.module('myApp',[]);
function ProductCtrl($scope) {

$scope.showFileName= function(){

   var fil = document.getElementById("myFile");
   alert(fil.value); 


}
}
</script>
  </body>

</html>

And here is my plnkr:http://plnkr.co/edit/Cir7Ardx3OVvwPWYJNNv?p=preview

1) You mis-spelled ng-click. 2) The URL for angular.js is incorrect. It should be `https://code.angularjs.org/2.0.0-alpha.20/angular2.js` — HankScorpio, May 07 '15 at 17:39
Ya i did as u said but there is no response .wat i need is wen i click on the link tag the path name should be alerted. — anil chean, May 07 '15 at 17:56
Hmmm, not sure. Even with those changes the console says "angular is undefined". You're using angular 2, which has some significant differences to 1. Did you start from a working angular 2 example? — HankScorpio, May 07 '15 at 17:59
Actually the code was in javascript foramat but i tried to do tat in Angular format.... it works perfectly in javascript — anil chean, May 07 '15 at 18:02
I only modified your plunker with those 2 changes that I mentioned. The next problem is that the console says angular is undefined. Perhaps someone else has an idea about that. — HankScorpio, May 07 '15 at 18:12
possible duplicate of [How to alert the path name in the alert box in angular js?](http://stackoverflow.com/questions/30101843/how-to-alert-the-path-name-in-the-alert-box-in-angular-js) — halfer, May 08 '15 at 23:40

score 0 · Answer 1 · edited May 23 '17 at 11:43

I cleaned up your Plunkr demo and forked it here:

http://plnkr.co/edit/YuinLcjb6OU7VsdSMca9?p=preview

First, I wasn't sure if you intended to target the unstable 2.0 version or not, so I changed it to target the latest stable release of AngularJS (1.3.15). Next, I moved your script to the script.js file and formatted your controller properly.

Now the HTML looks like:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="ProductCtrl">
    <form name="frmMain" id="frmMain">
      <input type="file" name="myFile" id="myFile" />
      <a href="#" ng-click="showFileName()">Show Name</a>
    </form>

    <hr />
    {{ name }}
  </body>

</html>

and your script looks like this:

angular.module('myApp', [])

  .controller("ProductCtrl", ProductCtrl);

function ProductCtrl($scope) {
  $scope.showFileName= function(){
     var fil = document.getElementById("myFile");
     alert(fil.value); 
  };
}

This is half the battle: making sure that your framework is working correctly. Now, how to show the full path of the selected file? Here are a few links to help you with that (or not, actually):

From the quick research I did on the full file path, it appears to be a security issue. — beaudetious, May 07 '15 at 19:17

How to alert the path name?

1 Answers1