angular.module('app', ['ui.grid'])

.controller('MainCtrl', ['$scope', function ($scope) {
  var vm = this;
  
  vm.gridOptions = {};
  
  vm.reset = reset;
  
  function reset() {
    vm.gridOptions.data = [];
    vm.gridOptions.columnDefs = [];
  }
}])

.directive("fileread", [function () {
  return {
    scope: {
      opts: '='
    },
    link: function ($scope, $elm, $attrs) {
      $elm.on('change', function (changeEvent) {
        var reader = new FileReader();
        
        reader.onload = function (evt) {
          $scope.$apply(function () {
            var data = evt.target.result;
            
            var workbook = XLSX.read(data, {type: 'binary'});
            
            var headerNames = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]], { header: 1 })[0];
            
            var data = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]]);
            
            $scope.opts.columnDefs = [];
            headerNames.forEach(function (h) {
              $scope.opts.columnDefs.push({ field: h });
            });
            
            $scope.opts.data = data;
            
            $elm.val(null);
          });
        };
        
        reader.readAsBinaryString(changeEvent.target.files[0]);
      });
    }
  }
}]);
body {
  /* font-family: Verdana; */
  padding: 20px;
}

.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 > .center {
  display: table-cell;
  vertical-align: middle;
}

.grid input[type="file"] {
  font-size: 14px;
  display: inline-block;
}
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <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="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
    <script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/xlsx.full.min.js"></script>
    <script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/ods.js"></script>
    <script src="https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.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 Grid</button>
      <br />
      <br />
      <div id="grid1" ui-grid="vm.gridOptions" class="grid">
        <div class="grid-msg-overlay" ng-show="!vm.gridOptions.data.length">
          <div class="msg">
            <div class="center">
              <span class="muted">Select Spreadsheet File</span>
              <br />
              <input type="file" accept=".xls,.xlsx,.ods" fileread="" opts="vm.gridOptions" multiple="false" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>

</html>
[
  {
    "name": "Lesa",
    "age": 30,
    "gender": "female"
  },
  {
    "name": "Bettye",
    "age": 29,
    "gender": "female"
  },
  {
    "name": "Contreras",
    "age": 23,
    "gender": "male"
  },
  {
    "name": "Cameron",
    "age": 28,
    "gender": "male"
  },
  {
    "name": "Robin",
    "age": 20,
    "gender": "female"
  },
  {
    "name": "Brenda",
    "age": 25,
    "gender": "female"
  },
  {
    "name": "Fleming",
    "age": 26,
    "gender": "male"
  },
  {
    "name": "Cathryn",
    "age": 23,
    "gender": "female"
  },
  {
    "name": "Hyde",
    "age": 25,
    "gender": "male"
  },
  {
    "name": "Sarah",
    "age": 23,
    "gender": "female"
  },
  {
    "name": "Alston",
    "age": 28,
    "gender": "male"
  },
  {
    "name": "Conrad",
    "age": 21,
    "gender": "male"
  },
  {
    "name": "Garza",
    "age": 23,
    "gender": "male"
  },
  {
    "name": "Charles",
    "age": 21,
    "gender": "male"
  },
  {
    "name": "Herminia",
    "age": 20,
    "gender": "female"
  },
  {
    "name": "Joy",
    "age": 27,
    "gender": "female"
  },
  {
    "name": "Meredith",
    "age": 26,
    "gender": "female"
  },
  {
    "name": "Leach",
    "age": 24,
    "gender": "male"
  },
  {
    "name": "Sosa",
    "age": 24,
    "gender": "male"
  },
  {
    "name": "Savage",
    "age": 29,
    "gender": "male"
  },
  {
    "name": "Morrison",
    "age": 25,
    "gender": "male"
  },
  {
    "name": "Frankie",
    "age": 29,
    "gender": "female"
  },
  {
    "name": "Annabelle",
    "age": 26,
    "gender": "female"
  },
  {
    "name": "Bonnie",
    "age": 23,
    "gender": "female"
  },
  {
    "name": "Dina",
    "age": 26,
    "gender": "female"
  },
  {
    "name": "Marva",
    "age": 23,
    "gender": "female"
  },
  {
    "name": "Jennings",
    "age": 21,
    "gender": "male"
  },
  {
    "name": "Barbara",
    "age": 20,
    "gender": "female"
  },
  {
    "name": "Bruce",
    "age": 27,
    "gender": "male"
  },
  {
    "name": "Albert",
    "age": 24,
    "gender": "male"
  },
  {
    "name": "Elvira",
    "age": 29,
    "gender": "female"
  },
  {
    "name": "Araceli",
    "age": 23,
    "gender": "female"
  },
  {
    "name": "Bullock",
    "age": 20,
    "gender": "male"
  },
  {
    "name": "Victoria",
    "age": 23,
    "gender": "female"
  },
  {
    "name": "Matthews",
    "age": 21,
    "gender": "male"
  },
  {
    "name": "Case",
    "age": 28,
    "gender": "male"
  },
  {
    "name": "Amie",
    "age": 20,
    "gender": "female"
  },
  {
    "name": "Ruby",
    "age": 29,
    "gender": "female"
  },
  {
    "name": "Linda",
    "age": 28,
    "gender": "female"
  },
  {
    "name": "Tracey",
    "age": 20,
    "gender": "female"
  },
  {
    "name": "Diaz",
    "age": 23,
    "gender": "male"
  },
  {
    "name": "Priscilla",
    "age": 24,
    "gender": "female"
  },
  {
    "name": "Dixie",
    "age": 26,
    "gender": "female"
  },
  {
    "name": "Sharron",
    "age": 22,
    "gender": "female"
  },
  {
    "name": "Deidre",
    "age": 21,
    "gender": "female"
  },
  {
    "name": "Potter",
    "age": 24,
    "gender": "male"
  },
  {
    "name": "Mcdonald",
    "age": 29,
    "gender": "male"
  },
  {
    "name": "Hartman",
    "age": 30,
    "gender": "male"
  },
  {
    "name": "Cook",
    "age": 30,
    "gender": "male"
  },
  {
    "name": "Powell",
    "age": 20,
    "gender": "male"
  },
  {
    "name": "Janette",
    "age": 30,
    "gender": "female"
  },
  {
    "name": "Mcfarland",
    "age": 21,
    "gender": "male"
  },
  {
    "name": "Lorena",
    "age": 24,
    "gender": "female"
  },
  {
    "name": "Bright",
    "age": 28,
    "gender": "male"
  },
  {
    "name": "Ester",
    "age": 23,
    "gender": "female"
  },
  {
    "name": "Marks",
    "age": 30,
    "gender": "male"
  },
  {
    "name": "Christa",
    "age": 30,
    "gender": "female"
  },
  {
    "name": "Gray",
    "age": 26,
    "gender": "male"
  },
  {
    "name": "Benjamin",
    "age": 25,
    "gender": "male"
  },
  {
    "name": "Lacy",
    "age": 28,
    "gender": "female"
  },
  {
    "name": "Belinda",
    "age": 28,
    "gender": "female"
  },
  {
    "name": "Diane",
    "age": 23,
    "gender": "female"
  },
  {
    "name": "Gross",
    "age": 30,
    "gender": "male"
  },
  {
    "name": "Wise",
    "age": 27,
    "gender": "male"
  },
  {
    "name": "Dunlap",
    "age": 26,
    "gender": "male"
  },
  {
    "name": "Ferrell",
    "age": 22,
    "gender": "male"
  },
  {
    "name": "Durham",
    "age": 24,
    "gender": "male"
  },
  {
    "name": "Gertrude",
    "age": 20,
    "gender": "female"
  },
  {
    "name": "Marla",
    "age": 25,
    "gender": "female"
  },
  {
    "name": "Kemp",
    "age": 23,
    "gender": "male"
  },
  {
    "name": "Murray",
    "age": 21,
    "gender": "male"
  },
  {
    "name": "Naomi",
    "age": 20,
    "gender": "female"
  },
  {
    "name": "Love",
    "age": 20,
    "gender": "male"
  },
  {
    "name": "Angelita",
    "age": 24,
    "gender": "female"
  },
  {
    "name": "Zamora",
    "age": 20,
    "gender": "male"
  },
  {
    "name": "Keri",
    "age": 28,
    "gender": "female"
  },
  {
    "name": "Pruitt",
    "age": 23,
    "gender": "male"
  },
  {
    "name": "Joyce",
    "age": 28,
    "gender": "female"
  },
  {
    "name": "Lula",
    "age": 24,
    "gender": "female"
  },
  {
    "name": "Hall",
    "age": 20,
    "gender": "male"
  },
  {
    "name": "Head",
    "age": 23,
    "gender": "male"
  },
  {
    "name": "Haynes",
    "age": 22,
    "gender": "male"
  },
  {
    "name": "Craig",
    "age": 27,
    "gender": "male"
  },
  {
    "name": "Baxter",
    "age": 26,
    "gender": "male"
  },
  {
    "name": "Delores",
    "age": 25,
    "gender": "female"
  },
  {
    "name": "Bernard",
    "age": 24,
    "gender": "male"
  },
  {
    "name": "Desiree",
    "age": 26,
    "gender": "female"
  },
  {
    "name": "Chrystal",
    "age": 24,
    "gender": "female"
  },
  {
    "name": "Stokes",
    "age": 26,
    "gender": "male"
  },
  {
    "name": "Griffin",
    "age": 23,
    "gender": "male"
  },
  {
    "name": "Lawanda",
    "age": 27,
    "gender": "female"
  },
  {
    "name": "Ford",
    "age": 27,
    "gender": "male"
  },
  {
    "name": "Lucile",
    "age": 26,
    "gender": "female"
  },
  {
    "name": "Carroll",
    "age": 30,
    "gender": "male"
  },
  {
    "name": "Skinner",
    "age": 28,
    "gender": "male"
  },
  {
    "name": "Celina",
    "age": 25,
    "gender": "female"
  },
  {
    "name": "Pope",
    "age": 29,
    "gender": "male"
  },
  {
    "name": "Leah",
    "age": 29,
    "gender": "female"
  },
  {
    "name": "Rosie",
    "age": 25,
    "gender": "female"
  },
  {
    "name": "Miriam",
    "age": 27,
    "gender": "female"
  }
]