mykwillis/index.html

## index.html
<!doctype html>
<html>
<head>
  <script type="text/javascript" a
          src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <style type="text/css">
    .dropTarget {
      width: 300px;
      height: 100px;
      border: 1px solid green;
      text-align: center;
    }

    .dropatwill {
      background-color: green;
    }
  </style>
</head>

<body ng-app="app">

<div class="dropTarget" file-drop>
  <p>Drop file here</p>
</div>

</body>
</html>


<script type="text/javascript">
  angular.module('app', [])
      .directive('fileDrop', function () {
        return {
          restrict: 'A',
          link: function (scope, element, attr) {
            element.on('dragenter', function () {
              this.classList.add('dropatwill');
            });
            element.on('dragleave', function () {
              this.classList.remove('dropatwill');
            });
            element.on('dragover', function (event) {
              event && event.preventDefault();
              event.dataTransfer.effectAllowed = 'copy';
              return false;
            });
            element.on('drop', function (event) {
              event && event.preventDefault();
              this.classList.remove('dropatwill');
              return false;
            });
          }
        };
      });
</script>
	<!doctype html>
	<html>
	<head>
	<script type="text/javascript" a
	src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
	<style type="text/css">
	.dropTarget {
	width: 300px;
	height: 100px;
	border: 1px solid green;
	text-align: center;
	}

	.dropatwill {
	background-color: green;
	}
	</style>
	</head>

	<body ng-app="app">

	<div class="dropTarget" file-drop>
	<p>Drop file here</p>
	</div>

	</body>
	</html>


	<script type="text/javascript">
	angular.module('app', [])
	.directive('fileDrop', function () {
	return {
	restrict: 'A',
	link: function (scope, element, attr) {
	element.on('dragenter', function () {
	this.classList.add('dropatwill');
	});
	element.on('dragleave', function () {
	this.classList.remove('dropatwill');
	});
	element.on('dragover', function (event) {
	event && event.preventDefault();
	event.dataTransfer.effectAllowed = 'copy';
	return false;
	});
	element.on('drop', function (event) {
	event && event.preventDefault();
	this.classList.remove('dropatwill');
	return false;
	});
	}
	};
	});
	</script>