Uploader Tester

by grippstick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.metro.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id='container'>
        <input id='uploader' name="files" type="file" data-role='upload' data-multiple='true' data-show-file-list='false'
            data-async='{saveUrl: "/Application/Services/FileService.svc/UploadFile", autoUpload: false}'
    data-bind='events:{error:fileError,success: fileSuccess,select:fileSelect}' data-template='fileTemplate' />
    <ul data-bind='source:files' data-template='fileTemplate'>
    </ul>
</div>
    <script id="fileTemplate" type="text/x-kendo-template">
                <span class='k-progress'></span>
                <div class='file-wrapper'>
                    <span class='file-icon doc'></span>
                    <h4 class='file-heading file-name-heading'>Name: #=name#</h4>
                    <h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>
                    <button type='button' class='k-upload-action'></button>
                </div>
    </script>

JavaScript

var vm = new kendo.observable({        
    files:[],
    fileError: function (e) {
        console.warn('file error');
    },
    fileSuccess: function (e) {
        console.warn('file success');
    },
    fileSelect: function (e) {
        var include=false;
        $.each(e.files,function(index,item){
            var found =vm.files.filter(function(tmp){
                            if(item.name==tmp.name){return true;}
             });
            if(found.length==0){
                vm.files.push(item);
                vm.files.trigger('change');                
            }            else{
                e.preventDefault();
                return;
            }
        });        
    }
});

kendo.bind($('#container'), vm);