JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  Select a file, and you should see an alert message
</p>

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="file" custom-on-change="uploadFile"/>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function($scope) {
    $scope.uploadFile = function(){
        var filename = event.target.files[0].name;
        alert('file was selected: ' + filename);
    };
});

myApp.directive('customOnChange', ['uuid', 'fileUploader', function(uuid, fileUploader) {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                chooseFileButtonText: '@',
                uploadFileButtonText: '@',
                uploadUrl: '@',
                maxFiles: '@',
                maxFileSizeMb: '@',
                autoUpload: '@',
                getAdditionalData: '&',
                onProgress: '&',
                onDone: '&',
                onError: '&'
            },
            template: '<span>' + 
                        '<input type="file" style="opacity:0" />' +
                        '<label class="lvl-choose-button" ng-click="choose()">{{chooseFileButtonText}}</label>' +
                        '<button class="lvl-upload-button" ng-show="showUploadButton" ng-click="upload()">{{uploadFileButtonText}}</button>' +
                      '</span>',
            compile: function compile(tElement, tAttrs, transclude) {
                var fileInput = angular.element(tElement.children()[0]);
                var fileLabel = angular.element(tElement.children()[1]);
 
                if (!tAttrs.maxFiles) {
                    tAttrs.maxFiles = 1;
                    fileInput.removeAttr("multiple")
                } else {
                    fileInput.attr("multiple", "multiple");
                }
 
                if (!tAttrs.maxFileSizeMb) {
                    tAttrs.maxFileSizeMb = 50;
                }
 
                var fileId = uuid.new();
                fileInput.attr("id", fileId);
                fileLabel.attr("for", fileId);
 
                return function postLink(scope, el, attrs, ctl) {
                    scope.files = [];
              ...