ng-file-upload accept and pattern binding

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

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
  <link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="styesheet" href="style.css" />
  <link rel="styesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />
  <script data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js" data-require="angular.js@1.4.8"></script>
  <script data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js" data-require="ui-bootstrap@0.14.3"></script>
  <script data-semver="10.1.9" src="https://cdn.rawgit.com/danialfarid/ng-file-upload/4cdec8f23fbb2558870b769d5ae59e03c3ab0e44/dist/ng-file-upload.js" data-require="ng-file-upload@10.1.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as main" class="container">
  <br />
  <uib-alert ng-show="main.file.upload.invalid[0].$error === 'pattern'" class="alerts-animate" type="danger"><i class="fa fa-file"></i> <strong>Invalid file type! </strong>Please try another file or check "allow all file types."</uib-alert>
  <div class="form-group">
    <div class="input-group input-group-lg">
      <span class="input-group-addon"><i class="fa fa-file-excel-o"></i></span>
      <div class="input-group-addon input-group-drop">
        <div 
        ngf-select="main.do($files)" 
        ngf-drop
        ng-model="main.file.upload.data"
        >
          <button class="btn btn-xs btn-primary">Select File</button>
          <span ng-show="main.file.upload.dropAvailable">or Drag/Drop File Here</span>
        </div>
      </div>
      <span class="input-group-addon"></span>
    </div>
  </div>
  <div>{{main.selectedFile.name | json}}</div>
  <div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox" ng-model="main.file.override" /> Allow all file types <strong>{{main.file.override}}</strong>
    </label>
  </div>
</body>

</html>

var app = angular.module('plunker', ['ui.bootstrap', 'ngFileUpload']);

app.controller('MainCtrl', function() {
  var vm = this;
  vm.mimes = [
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    'application/vnd.ms-excel',
    'application/vnd.oasis.opendocument.spreadsheet',
    'text/csv',
    'application/json',
    'text/tsv'
  ];
  vm.exts = [
    '.xlsx',
    '.xls',
    '.ods',
    '.csv',
    '.json',
    '.tsv',
    '.tab'
  ];
  vm.file = {
    override: false
  };
  
  vm.selectedFile = {};
  
  vm.do = function(file) {
    console.log(file);
    vm.selectedFile = file[0];
  }
  
  // vm.file.upload = {
  //   dropAvailable: false,
  //   accept: (!vm.file.override) ? vm.mimes.join(',') + ',' + vm.exts.join(',') : '',
  //   pattern: (!vm.file.override) ? vm.mimes.join(',') + ',' + vm.exts.join(',') : ''
  // };
});

.input-group-drop {
  padding: 0 !important;
}
.input-group-drop div {
  padding: 19px 30px;
}