file-upload-angular-directive.js

//Directive for file upload

app.directive('fileUpload', function () {
    return {
        scope: false,
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var files = event.target.files;
                scope.$emit("fileUploaded", { file: event.target.files[0] }); //since we need only single file upload right now
            });
        }
    };
});
{code}

//Listen for "fileUploaded" event in the controller. 
//"fu" is the angular app object. Replace it with your own object. You would do something like this in your controller "var fu = this;"

$scope.$on("fileUploaded", function (event, args) {
    $scope.$apply(function () {
        var reader = new FileReader();

        reader.onload = function(event){ //this function will be called when we read data (below line)
          try{
            fu.fileContent = event.target.result;
          
          }catch(e){
              console.log(e.message);
              $scope.$apply(function(){                  
                fu.fileName = null; //setting fileName to null will allow us to do validations                
              });
          }
        };

        fu.file = args.file;
        fc.fileName = args.file.name;
        
        reader.readAsText(args.file); //we can skip this if reading data is not required
    });
});