JSFiddle - React, Tailwind, and code Playground

by manikantag

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/vendor/jquery.ui.widget.js"></script>
<script src="http://blueimp.github.com/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<div ng-app="myApp">
    
<script type="text/ng-template" id="partials/my-directive.html">
    <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>
</script>

<div ng-controller="myCtrl">

    <form novalidate action="/your/path/here">

        <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>
</div>

JavaScript

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


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

myApp.directive('myDirective', function() {
    return {
        templateUrl: 'partials/my-directive.html',
        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;
                        });
                    })

                }
            });
        }

    }
});