JSFiddle - React, Tailwind, and code Playground

by tech_no_logical

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://blueimp.github.com/jQuery-File-Upload/js/jquery.fileupload.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

        <form novalidate>

            <my-directive ng-model="myModel.file1"></my-directive>
            <my-directive ng-model="myModel.file2"></my-directive>
            <my-directive ng-model="myModel.file3"></my-directive>
            
            <br />
            
        </form>
    
        Form : {{myModel}}
</div>

JavaScript

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


myApp.controller("myCtrl", function($scope) {
    $scope.myModel = {};
});

myApp.directive('myDirective', function() {
      return {
    template: '<div><input type="file" /><input type="hidden" ng-model="filename" /><span ng-show="filename">{{filename}}</span><span ng-show="progress" ng-hide="filename">{{progress}}%</span></div>',
    replace: true,
    restrict: 'E',
    scope : {
        filename: '=ngModel'
    },
    link: function(scope, elm, attrs) {
        
        $(elm).fileupload({
            dataType: 'json',
            paramName: 'files[]',
            
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);                
                scope.$apply(function() {                        
                    scope.progress = progress;
                });                
                
            },         
            
            done: function(e,data) {
                
                $.each(data.result, function(index, file) {                    
                    scope.$apply(function() {                        
                        scope.filename = file.name;
                    });
                })
                
            }
        });
    }

});