AngularJS File Reader Example

var UploadController = function ($scope, fileReader) {
  $scope.getTextFile = function () {
    $scope.progress = 0;
    fileReader.readAsText($scope.file, $scope).then(function(result) {
      $scope.text = result;
    });
  };
};

app.directive("readText", function() {
  return {
    link: function($scope,el) {
      el.bind("change", function(e) {
        $scope.file = (e.srcElement || e.target).files[0];
        $scope.getTextFile();
      });
    }
  };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script> var app = angular.module('plunker', []); </script>
    <script src="upload.js"></script>
    <script src="app.js"></script>
  </head>

  <div ng-controller="UploadController">
    <form>
      <input type="file" read-text="onFileSelect($files)">
    </form>
    <p>{{text}}</p>
  </div>

</html>

/* Put your css in here */

(function (module) {
     
    var fileReader = function ($q) {
 
    var onLoad = function(reader, deferred, scope) {
      return function () {
        scope.$apply(function () {
          deferred.resolve(reader.result);
        });
      };
    };
 
    var onError = function (reader, deferred, scope) {
      return function () {
        scope.$apply(function () {
          deferred.reject(reader.result);
        });
      };
    };

    var getReader = function(deferred, scope) {
      var reader = new FileReader();
      reader.onload = onLoad(reader, deferred, scope);
      reader.onerror = onError(reader, deferred, scope);
      return reader;
    };
 
    var readAsText = function (file, scope) {
      var deferred = $q.defer();
    
      var reader = getReader(deferred, scope);         
      reader.readAsText(file);
             
      return deferred.promise;
    };
 
    return {
      readAsText: readAsText 
    };
  };
 
  module.factory("fileReader", ["$q", fileReader]);
 
}(angular.module("plunker")));