UI-Grid file upload

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.importer', 'angularFileUpload']);

app.controller('MainCtrl', ['uiGridImporterService', function (uiGridImporterService) {
  var vm = this,
      gridApi;
  
  vm.reset = reset;
  vm.upload = upload;
  vm.gridOptions = {
    data: [],
    importerDataAddCallback: function (grid, newObjects) {
      vm.gridOptions.data = vm.gridOptions.data.concat(newObjects);
    },
    onRegisterApi: function (api) {
      gridApi = api;
    }
  };
  
  ////////////
  
  function reset() {
    vm.gridOptions.data = [];
    vm.gridOptions.columnDefs = [];
    vm.gridOptions.columns = null;
  }
  
  function upload($files) {
    var reader = new FileReader();
    
    reader.onload = uiGridImporterService.importJsonClosure(gridApi.grid);
    reader.readAsText($files[0]);
  }
}]);

body {
  padding: 10px;
}

.grid {
  width: 100%;
  height: 250px;
}

.grid-msg-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.grid-msg-overlay .msg {
  opacity: 1;
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 50%;
  background-color: #eee;
  border-radius: 4px;
  border: 1px solid #555;
  text-align: center;
  font-size: 24px;
  display: table;
}

.grid-msg-overlay .msg span {
  display: table-cell;
  vertical-align: middle;
}

.grid-msg-overlay .msg.upload-file {
  border-radius: 8px;
  border: 5px dashed #888;
  color: #888;
}

.grid-msg-overlay .msg.upload-file.dragover {
  background-color: #5cb85c;
  border: 5px solid #4cae4c;
  color: white;
}

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

  <head>
    <link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
    <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 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-touch.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <script src="http://angular-file-upload.appspot.com/js/angular-file-upload.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css" />
  </head>

  <body>
    <div ng-controller="MainCtrl as vm">
      <button type="button" class="btn btn-success" ng-click="vm.reset()">Reset</button>
      <br />
      <br />
      <div id="grid1" ui-grid="vm.gridOptions" ui-grid-importer class="grid">
        <div class="grid-msg-overlay" ng-show="vm.loading">
          <div class="msg">
            <span>
              Loading Data...
              <i class="fa fa-spinner fa-spin"></i>
            </span>
          </div>
        </div>
        <div class="grid-msg-overlay" ng-hide="vm.loading || vm.gridOptions.data.length">
          <div class="msg upload-file"
            ng-file-drop
            ng-file-change="vm.upload($files)"
            drag-over-class="dragover">
            
            <span>Drop JSON File Here</span>
          </div>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>

</html>