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

Upload Files and Select Additional Metadata

Environment

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

Description

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

Solution

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

            <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">
                        <option>Developer</option>
                        <option>Support</option>
                        <option>QA</option>
                        <option>HR</option>
                    </select>
                    <button type='button' class='k-upload-action'></button>
                </div>
            </script>

            <script>
                $(document).ready(function () {
                    $("#files").kendoUpload({
                        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;

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

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

                e.data = {
                    uploader: dropdown.value()
                };
              }
            </script>

            <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;
                    overflow:hidden;
                    white-space:nowrap;
                }

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

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

                .k-dropdownlist{
                    width:auto;
                }

                li.k-file div.file-wrapper
                {
                    position: relative;
                    height: 33px;
                }
            </style>
        </div>


    </script>

See Also

In this article