Accept dropped files, unzip and parse json

var app = angular.module('plunker', [
  "fa.extractAndParse",
  "fa.droppable",
]);

app.controller('MainCtrl', ["extractAndParse", function (extractAndParse) {
  var main = this;
  main.handleFiles = function (files) {
    main.error = null;
    
    extractAndParse(files[0])
      .then(function (file) {
        main.file = file;
        console.log('main', main.file);
      }, function(reason){
        main.error = reason.message;
      });
  };
}]);

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-beta.5/angular.js" data-semver="1.4.0-beta.5"></script>
  <script data-require="jszip@2.4.0" data-semver="2.4.0" src="https://cdn.rawgit.com/Stuk/jszip/v2.4.0/dist/jszip.js"></script>
  <script src="app.js"></script>
  <script src="extractAndParse.js"></script>
  <script src="droppable.js"></script>
</head>

<body ng-controller="MainCtrl as main">
  <div class="panel panel-default drop-target" drop-files="main.handleFiles(files)">
    <div class="panel-body">
      Drop Your Zip File Here
    </div>
  </div>
  <div class="alert alert-danger" role="alert" ng-if="main.error"><strong>Uh oh!</strong> {{main.error}}</div>
  <div ng-if="main.file">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Dependency</th>
          <th>Version</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="(dependency, version) in main.file.dependencies">
          <th>{{dependency}}</th>
          <td>{{version}}</td>
        </tr>
      </tbody>
    </table>
    <hr />
    <pre ng-bind="main.file | json"></pre>
  </div>
</body>

</html>

body {
  padding: 50px;
}

.drop-target {
  border: 2px dashed blue;
}

angular.module("fa.droppable", [
])

.directive("dropFiles", [ function () {
  var linkFn = function (scope, element, attrs, ctrl) {
    var extractFiles = function (e) {
      var files = e.dataTransfer.files;
      var filesArray = [];
      
      for (var i = 0, len = files.length; i < len; i++) {
        filesArray.push(files[i]);
      }
      
      return filesArray;
    };

    var handleDragOver = function (e) {
      e.preventDefault();
    };
    
    var handleDrop = function (e) {
      e.preventDefault();
      
      var files = extractFiles(e);
      
      ctrl.dropFiles({files: files});
    };
  
    element.on("dragover", handleDragOver);
    element.on("drop", handleDrop);
    
    scope.$on("$destroy", function () {
      element.off("dragover", handleDragOver);
      element.off("drop", handleDrop);
    });
  };
  
  return {
    restrict: "A",
    controller: "DropFilesCtrl",
    controllerAs: "drop",
    bindToController: true,
    require: "dropFiles",
    scope: {
      accepts: "&",
      dropFiles: "&",
    },
    link: linkFn
  };
}])

.controller("DropFilesCtrl", [ function () {
  var drop = this;
}])

angular.module("fa.extractAndParse", [
])

.factory("extractAndParse", ["$q", function ($q) {
  function unzip (zipfile) {
    var deferred = $q.defer();
    var reader = new FileReader();
    
    reader.onerror = deferred.reject.bind(deferred);
    reader.onload = function (e) {
      if (!reader.result) deferred.reject(new Error("Unknown error"));
      
      var zip = new JSZip(reader.result);
      var file = zip.files['package.json'];
      
      if(typeof file === 'undefined') {
        deferred.reject(new Error('package.json does not exist'));
      }

      return deferred.resolve(file.asText());
    };
    
    reader.readAsArrayBuffer(zipfile);
    
    return deferred.promise;
  }
  
  function extractAndParse (zipfile) {
    return unzip(zipfile)
      .then(JSON.parse);
  }

  return extractAndParse;
}]);

{
  "name": "angular",
  "version": "2.0.0-alpha.12",
  "description": "Angular 2 - a web framework for modern web apps",
  "homepage": "https://github.com/angular/angular",
  "bugs": "https://github.com/angular/angular/issues",
  "contributors": {
    "Alex Eagle": "alexeagle@google.com",
    "Chirayu Krishnappa": "chirayu@google.com",
    "Jeff Cross": "crossj@google.com",
    "Misko Hevery": "misko@google.com",
    "Rado Kirov": "radokirov@google.com",
    "Tobias Bosch": "tbosch@google.com",
    "Victor Savkin": "vsavkin@google.com",
    "Yegor Jbanov": "yjbanov@google.com"
  },
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/angular/angular.git"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "es6-module-loader": "^0.9.2",
    "systemjs": "^0.9.1",
    "traceur": "0.0.82",
    "which": "~1",
    "zone.js": "0.4.0",
    "googleapis": "1.0.x",
    "node-uuid": "1.4.x",
    "selenium-webdriver": "2.x.x"
  },
  "devDependencies": {
    "angular": "1.3.5",
    "bower": "^1.3.12",
    "canonical-path": "0.0.2",
    "css-parse": "2.0.0",
    "del": "~1",
    "dgeni": "^0.4.1",
    "dgeni-packages": "^0.10.10",
    "event-stream": "^3.1.5",
    "fs-extra": "^0.16.4",
    "glob": "^4.0.6",
    "gulp": "^3.8.8",
    "gulp-changed": "^1.0.0",
    "gulp-connect": "~1.0.5",
    "gulp-jasmine": "^1.0.1",
    "gulp-load-plugins": "^0.7.1",
    "gulp-rename": "^1.2.0",
    "gulp-shell": "^0.2.10",
    "gulp-sourcemaps": "1.3.*",
    "gulp-template": "^3.0.0",
    "gulp-traceur": "0.16.*",
    "gulp-webserver": "^0.8.7",
    "js-yaml": "^3.2.7",
    "karma": "^0.12.23",
    "karma-chrome-launcher": "^0.1.4",
    "karma-cli": "^0.0.4",
    "karma-dart": "^0.2.8",
    "karma-jasmine": "^0.2.2",
    "lodash": "^2.4.1",
    "merge": "^1.2.0",
    "minimatch": "^2.0.1",
    "minimist": "1.1.x",
    "parse5": "1.3.2",
    "protractor": "1.7.x",
    "q": "^1.0.1",
    "run-sequence": "^0.3.6",
    "source-map": "^0.3.0",
    "sprintf-js": "1.0.*",
    "temp": "^0.8.1",
    "ternary-stream": "^1.2.3",
    "through2": "^0.6.1",
    "vinyl": "^0.4.6",
    "yargs": "2.3.*"
  }
}