<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf8">
    <link href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css" rel="stylesheet" />
    <script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-controller="fileUploadDemoController">
    <h1>Kendo UI upload file</h1>
    <form ng-submit="submit($event)">
        <div class="form-group">
            <label><input type="radio" name="kind" ng-model="kind" ng-value="'multi'" ng-required="true" />Multi</label>
            <label><input type="radio" name="kind" ng-model="kind" ng-value="'single'" ng-required="true" />Single</label>
        </div>
        <div class="form-group" ng-if="kind=='multi'">
          <label class="control-label col-md-2">上傳附檔</label>
          <div class="col-md-10">
            <input name="files" id="files" type="file" />
          </div>
        </div>
        <div class="form-group" ng-if="kind=='single'">
          <label class="control-label col-md-2 requiredstar">上傳附檔</label>
          <div class="col-md-10">
            <input name="filesingle" id="filesingle" type="file" />
          </div>
        </div>
        <div class="form-group">
            <button type="submit">Submit</button>
        </div>
    </form>
    <script src="app.js"></script>
  </body>

</html>
// Code goes here

(function(){
    'use strict';
    angular.module("app",[])
        .controller("fileUploadDemoController",["$scope", "$http", "$timeout",
        function($scope,$http,$timeout){
            $scope.kind="single";
            $scope.$watch("kind", function (newValue, oldValue) {
                if (newValue == 'multi') {
                    (function checkFilesElement() {
                        if ($("#files").length) {
                            $("#files").kendoUpload();
                        } else {
                            $timeout(checkFilesElement, 100);
                        }
                    })();
                }else if (newValue == 'single') {
                    (function checkFilesingleElement() {
                        if ($("#filesingle").length) {
                            $("#filesingle").kendoUpload({ "multiple": false });
                        } else {
                            $timeout(checkFilesingleElement, 100);
                        }
                    })();
                    
                }
            });
            
            function isHasFile() {
                var inputElements2 = angular.element(document.querySelectorAll("[name='filesingle'][tabindex='-1']"));
                var count = 0;
                angular.forEach(inputElements2, function (elm) {
                    for (var i in elm.files) {
                        count++;
                    }
                });
                return count > 0;
            }
            
            function cancelUpload(id) {
                if (id) {
                    //if an id is passed as a param, only reset the element's child upload controls (in case many upload widgets exist)
                    $("#" + id + " .k-upload-files").remove();
                    $("#" + id + " .k-upload-status").remove();
                    $("#" + id + " .k-upload.k-header").addClass("k-upload-empty");
                    $("#" + id + " .k-upload-button").removeClass("k-state-focused");
                } else {
                    //reset all the upload things!
                    $(".k-upload-files").remove();
                    $(".k-upload-status").remove();
                    $(".k-upload.k-header").addClass("k-upload-empty");
                    $(".k-upload-button").removeClass("k-state-focused");
                }
            }
            
            $scope.submit=function($event){
                $scope.hasFile = true;

                if ($scope.kind === 'single') {
                    $scope.hasFile = isHasFile();
                }
                
                if ($scope.hasFile === false) {
                    $event.preventDefault();
                    return false;
                }
                
                var formData = new FormData();
                for (var key in $scope.model) {
                    formData.append(key, $scope.model[key]);
                }
                
                if ($scope.kind === 'multi') {
                    var inputElements1 = angular.element(document.querySelectorAll("[name='files'][tabindex='-1']"));
                    angular.forEach(inputElements1, function (elm) {
                        for (var i in elm.files) {
                            formData.append("files", elm.files[i]);
                        }
                    });
                } else if ($scope.kind === 'single') {
                    var inputElements2 = angular.element(document.querySelectorAll("[name='filesingle'][tabindex='-1']"));
                    angular.forEach(inputElements2, function (elm) {
                        for (var i in elm.files) {
                            formData.append("files", elm.files[i]);
                        }
                    });
                }
                
                //post to asp.net FileController/UploadAction
                $http({
                    method: "POST",
                    url: "/file/upload",
                    headers: { "Content-Type": undefined },
                    transformRequest: angular.identity,
                    data: formData
                }).success(function (data) {
                    //Save Success
                }).error(function (res) {
                    cancelUpload("files");
                    cancelUpload("filesingle");
                    alert("failed");
                });

            };
        }]);
    
    angular.bootstrap(document,["app"]);
})();
/* Styles go here */