New to Kendo UI for jQuery? Download free 30-day trial

Upload Files and Select Additional Metadata


Product Progress® Kendo UI® Upload for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I upload files and select additional metadata by using the Kendo UI Upload?


The following example demonstrates how to achieve the desired scenario.

<div id="example">
          <h3>Upload files and select additional metadata</h3>
            <div class="demo-section k-header">
                <input type="file" name="files" id="files" />

            <script id="fileTemplate" type="text/x-kendo-template">
                <span class='k-progress'></span>
                <div class='file-wrapper'>
                    <h4 class='file-heading file-name-heading'>Name: #=name#</h4>
                    <h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>
                    <h4 class='file-heading'>Uploaded by:</h4>
                    <select class="info">
                    <button type='button' class='k-upload-action'></button>

                $(document).ready(function () {
                        multiple: true,
                        async: {
                            saveUrl: "save",
                            removeUrl: "remove",
                            autoUpload: false
                        template: kendo.template($('#fileTemplate').html()),
                        select: onSelect,
                        upload: onUpload

                function onSelect(e){
                  var upload = this;
                  var files = e.files;

                    for(var i = 0; i < files.length; i++){
                      var select = upload.wrapper.find(".k-file[data-uid='" + files[i].uid +"'] select");

              function onUpload(e){
                var upload = this;
                var dropdown = upload.wrapper.find(".k-file[data-uid='" + e.files[0].uid +"'] select").data("kendoDropDownList");

       = {
                    uploader: dropdown.value()

            <style scoped>
              html {
                font-size: 12px;
                font-family: Arial, Helvetica, sans-serif;

              #example {
                width: 800px;

                #example .file-heading
                    font-family: Arial;
                    font-size: 1.0em;
                    line-height: 35px;
                    display: inline-block;
                    float: left;
                    margin: 0 20px 0 20px;
                    height: 25px;
                    -ms-text-overflow: ellipsis;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;

                    #example .file-name-heading
                        font-weight: bold;

                     #example .file-size-heading
                        font-weight: normal;
                        font-style: italic;


                li.k-file div.file-wrapper
                    position: relative;
                    height: 33px;


See Also

In this article