JSFiddle - React, Tailwind, and code Playground

by jnthnjns_

HTML

<body ng-app="app" ng-controller="appCtrl">
    <file-upload mime-type="text/html"></file-upload>
</body>

JavaScript

//Removal of the accept attribute if mimeType=undefined

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

app.filter('accept', function (){
	return function(mimeType){
		if(mimeType)
		{
			if(mimeType.length)
				return mimeType;
			else
				return "";
		}
		else
			return "";};
});

app.controller("appCtrl", function ($rootScope, $timeout) {
    
});

app.run(function($templateCache) {
  $templateCache.put('temp.html', '<div class="alert alert-warning alert-dismissable" ng-show="isError"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>button{{ message }}</div>');
   
});

app.directive("fileUpload", function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            mimeType: '@'  
        },
        //Template using the "accept" filter
        template: '<input type="file" id="files" name="files[]" accept="{{mimeType | accept}}" multiple />',
        
        //Template not using the "accept" filter (commented out for testing)
        //template: '<input type="file" id="files" name="files[]" accept="{{mimeType}}" multiple />',
        link: function (scope) {
        
        }
    };
});