JSFiddle - React, Tailwind, and code Playground

by Duke Dinh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="testapp" ng-controller="testctrl">
  <input type="file" ng-model="files" name="aircraftList" etl-uploader multiple>
  <ul>
    <li ng-repeat="file in files">{{ file.name }}</li>
  </ul>
  <button type="button" ng-click="files = []">Clear List</button>
</div>

JavaScript

var app = angular.module("testapp", []);

app.directive('etlUploader', [function() {
  return {
    scope: {
      ngModel: '='
    },
    link: function(scope, el) {
      el.bind('change', function(event) {
        if (event.target.files && event.target.files.length > 0) {
          angular.forEach(event.target.files, function(newFile) {
            scope.ngModel.push(newFile);
          });
          scope.$apply();
        }
      });
    }
  };
}]);

app.controller("testctrl", ['$scope', function($scope) {
  $scope.files = [];
}]);