JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://angular-file-upload.appspot.com/js/angular-file-upload.js"></script>
<div ng-app="fileUpload" ng-controller="MyCtrl">
    <div>Steps to reproduce the missing model issue:
        <ol>
            <li>Drop a jpg file on the first dropzone: Reject 0 (expected to be 1)</li>
            <li>Click on the first dropzone and select a jpg: Reject 1 (correct)</li>
            <li>Drop a jpg file on the first dropzone: Reject 1 (correct)</li>
        </ol>
    </div>
    <div ng-file-drop ng-file-select ng-model="files" class="drop-box" drag-over-class="dragover" ng-model-rejected="rejectedFiles" accept="image/*" ng-accept="'.png'">ngAccept is a string</div>
    <hr>
    <div>Accepted: {{files.length || 0}}
        <br>
        <br>Rejected: {{rejectedFiles.length || 0}}</div>
            <hr>
    
    <div>Steps to reproduce the ignored ngAccept function:
        <ol>
            <li>Click on the second dropzone and select a png: Accepted 1 (correct)</li>
            <li>Click on the second dropzone and select a jpg: Reject 1 (correct)</li>
            <li>Drop a png file on the second dropzone: Accepted 1 (correct)</li>
        <li>Drop a jpg file on the second dropzone: Accepted 1 (wrong)</li>
        </ol>
    </div>
    <div ng-file-drop ng-file-select ng-model="files" class="drop-box" drag-over-class="dragover" ng-model-rejected="rejectedFiles" accept=".pdf,.xls,.docx,.doc,.xls,.xlx,.ppt,.pptx" ng-accept="verify($file)">ngAccept is a function</div>
    <div ng-no-file-drop>File Drag/Drop is not supported for this browser</div>
    <ul>
        <li ng-repeat="f in files" style="font:smaller">{{f.name}}</li>
    </ul>
</div>

CSS

.button {
    -moz-appearance: button;
    /* Firefox */
    -webkit-appearance: button;
    /* Safari and Chrome */
    padding: 10px;
    margin: 10px;
    width: 70px;
}
.drop-box {
    background: #F8F8F8;
    border: 5px dashed #DDD;
    width: 200px;
    height: 65px;
    text-align: center;
    padding-top: 25px;
    margin: 10px;
}
.dragover {
    border: 5px dashed blue;
}

JavaScript

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['angularFileUpload']);

app.controller('MyCtrl', ['$scope', '$upload', '$log', function ($scope, $upload, $log) {
    $scope.$watch('files', function () {
        $log.info($scope.files);
    });

    $scope.$watch('rejectedFiles', function () {
        $log.info($scope.rejectedFiles);
    });

    $scope.verify = function (f) {
        console.log(f && f.type);
        return f && f.type === 'image/png';
    };

}]);