Angular File Upload Directive

<html>
    <head>
        <title>OnRepeatFinish Demo w/ Custom Animation</title>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular-animate.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular-loader.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular-sanitize.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular-cookies.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular-touch.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular-resource.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
        <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type='text/javascript' src="script.js"></script>
        <script type='text/javascript' src="uploadFile.js"></script>
    </head>    
    <body ng-app="myApp">
        <div ng-controller="myCtrl as vm">
<div class="container">
    <form name="vm.uploadForm" class="pull-left" role="form" enctype="multipart/form-data" ng-disabled="vm.isBusy">
        <div class="form-group">
            <label>Select files to upload</label>
        </div>
        <div class="form-group">
          <span class="btn btn-primary btn-file">
              Browse.. <input type="file" multiple accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" upload-files="vm.files" has-files="vm.hasFiles" />
          </span>
        </div>
<div class="form-group" ng-show="vm.hasFiles">
    <ul class="list-unstyled">
        <li>
            <strong>Files:</strong>
        </li>
        <li ng-repeat="file in vm.files" ng-bind="file.name" />
    </ul>
    <input class="btn btn-primary" type="button" ng-click="vm.uploadFiles()" value="Upload">
    <input class="btn btn-warning" type="reset" value="Cancel">
</div>
        <div class="form-group" ng-show="vm.isUploading">
            <p class="help-block">Uploading...</p>
        </div>
    </form>
</div>

        </div>
    </body>
</html>

(function () {
    angular.module('myApp.controllers', []);
    angular.module('myApp.services', ['ngResource', 'ngAnimate']);

    var myApp = angular.module('myApp', [
        'myApp.controllers',
        'myApp.services',
        'long2know',
        'ngSanitize',
        'ui.bootstrap',
        'ui.router',
        'ui']);

    var myController = function ($scope, $timeout, $animate, $log) {
        var vm = this,
            init = function () {
                vm.hasFiles = false;
                vm.files = [];
            };

        init();
    };

    myController.$inject = ['$scope', '$timeout', '$animate', '$log'];
    angular.module('myApp.controllers')
        .controller('myCtrl', myController);

    myApp.run(['$log', function ($log) { $log.log("Start."); }]);
})()

.btn-file {
    position: relative;
    overflow: hidden;
}

    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }

# OnRepeatFinish

This is a directive that can be used to handle file uploading in Angular

### Links
  - [Blog](https://long2know.com/2017/02/angular-file-upload-directive/)

(function () {
    var long2know;
    try {
        long2know = angular.module("long2know")
    } catch (err) {
        long2know = null;
    }

    if (!long2know) {
        angular.module('long2know.services', ['ngResource', 'ngAnimate']);
        angular.module('long2know.controllers', []);
        angular.module('long2know.directives', []);
        angular.module('long2know.constants', []);
        angular.module('long2know',
            [
                'long2know.services',
                'long2know.controllers',
                'long2know.directives',
                'long2know.constants'
            ]);
    }

var uploadFiles = function () {
    var directive = {
        link: function (scope, element, attrs) {
            var changedHandler = function () {
                scope.$apply(function () {
                    if (element[0].files) {
                        scope.files.length = 0;
                        angular.forEach(element[0].files, function (f) {
                            scope.files.push(f);
                        });
                        scope.hasFiles = true;
                    }
                });
            };

            var resetHandler = function () {
                scope.$apply(function () {
                    scope.files.length = 0;
                    scope.hasFiles = false;
                });
            };

            element.bind('change', changedHandler);

            if (element[0].form) {
                angular.element(element[0].form).bind('reset', resetHandler);
            }

            // Watch the files so we can reset the input if needed
            scope.$watchCollection('files', function () {
                if (scope.files.length === 0) {
                    element.val(null);
                }
            })

            scope.$on('$destroy', function () {
                element.unbind('change', changedHandler);
                if (element[0].form) {
                    angular.element(element[0].form).unbind('reset', resetHandler);
                }
            });
        },
        restrict: 'A',
        scope: {
            files: '=uploadFiles',
            hasFiles: '='
        }
    };

    return directive;
};
        
    angular.module("long2know.directives")
        .directive('uploadFiles', uploadFiles);
})()