JSFiddle - React, Tailwind, and code Playground

by maxisam

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;
                        });
                    })

                }
            });
        }

    }
});