Hybrid solution for loading a file

http://angularjs.org/

by Tim Regan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<div id="ContainingDiv" ng-controller="MainController as ctrl">
    <input id="uploadInput" type="file" name="myFiles" onchange="grabFileContent()" />
    <br />
    {{ ctrl.content }}
</div>

JavaScript

var myApp = angular.module('myApp',[]);
    
    myApp.controller('MainController', ['$scope', function ($scope) {
        this.content = "[Waiting for File]";
        this.showFileContent = function(fileContent){
            $scope.$apply((function(controller){
                return function(){
                    controller.content = fileContent;
                };
            })(this));
        };
    }]);
    
    var grabFileContent = function() {
        var files = document.getElementById("uploadInput").files;
        if (files && files.length > 0) {
            var fileReader = new FileReader();
            fileReader.addEventListener("load", function(event) {
               var controller = angular.element(document.getElementById('ContainingDiv')).scope().ctrl;
               controller.showFileContent(event.target.result);
            });
            fileReader.readAsText(files[0]);
        }
    };