Q:

How to get the URL for the file selected in File Explorer using AngularJS

I need to click on the Choose file and select the file from the file explorer, then I need to get the URL for the selected file and store it in variable.Can you please look in to the below code and guide me since i am new to AnularJS...Thanks in Advance.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body >
    <div ng-app = "myApp" ng-controller="myControl">
        <input type="file" file-model="myFile" ng-module = "file_name" ng-click = "file_name()"><br>
        <h1>{{file_name()}}</h1>
    </div>

    <script>
        var app= angular.module("myApp",[]);
        app.controller("myControl",function($scope){
            $scope.file_name = function(){
                return $scope.file_name;
            };
        });

    </script>
</body>
</html>

A:

You can create url directive. Inside controller you should use $watch method to catch the moment, when file_name property will be assigned. At this example you can select picture file and it will be shown:

angular.module('app', [])
  .controller('ctrl', ['$scope', function($scope) {
    $scope.$watch('file_url', function(newVal, oldVal) {
      if (newVal != oldVal)
        console.log(newVal);
    }, true)
  }])
  .directive('url', function() {
    return {
      restrict: 'A',
      scope: {
        url: '='
      },
      link: function(scope, element) {
        element.on('change', function(event) {
          var reader = new FileReader();
          reader.onloadend = function() {
            scope.$apply(function() {
              scope.url = reader.result;
            });
          }

          var file = element[0].files[0];
          if (file)
            reader.readAsDataURL(file);
        })
      }
    }
  })
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app='app' ng-controller="ctrl">
  <img src="{{file_url}}" height="150" alt="Image preview...">
  <input type="file" url='file_url'>
</div>

