angular-file-drop/index.js

(function() {
  var app;

  app = angular.module('ngFileDrop', []);

  app.directive('dropZone', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var handleFiles;
        element = $(element[0]);
        $("body").append('<input type=file style="display: none" class="__dropZoneInput">');
        element[0].addEventListener('dragover', function(event) {
          event.preventDefault();
          event.stopPropagation();
          return element.addClass('dragging');
        });
        element[0].addEventListener('dragleave', function(event) {
          event.preventDefault();
          event.stopPropagation();
          return element.removeClass('dragging');
        });
        element[0].addEventListener('drop', function(e) {
          var files;
          event.preventDefault();
          event.stopPropagation();
          files = e.dataTransfer.files;
          return handleFiles(files);
        });
        $(".__dropZoneInput").on('change', function() {
          var files;
          files = this.files;
          return handleFiles(files);
        });
        element.click(function() {
          return $(".__dropZoneInput").click();
        });
        return handleFiles = function(files) {
          var count, file, i, len, reader, results;
          reader = new FileReader;
          reader.readAsDataURL(files[0]);
          reader.onload = function(res) {
            return scope.$apply(function() {
              return scope.file = res.target.result;
            });
          };
          count = files.length;
          scope.$apply(function() {
            return scope.files = [];
          });
          results = [];
          for (i = 0, len = files.length; i < len; i++) {
            file = files[i];
            reader = new FileReader;
            reader.readAsDataURL(file);
            results.push(reader.onload = function(res) {
              scope.$apply(function() {
                return scope.files.push(res.target.result);
              });
              count--;
              if (count === 0) {
                return scope.$apply(function() {
                  return scope.drop();
                });
              }
            });
          }
          return results;
        };
      },
      scope: {
        file: '=file',
        files: '=files',
        drop: '=drop'
      }
    };
  });

}).call(this);