New to Telerik UI for ASP.NET Core? Download free 30-day trial

Display Directory Name and File Size in Upload

Environment

Product Telerik UI for ASP.NET Core Upload
Progress Telerik UI for ASP.NET Core version Created with the 2022.1.412 version

Description

How can I display the directory name and the total size of its content when working with the Telerik UI for ASP.NET Core Upload?

Solution

  1. Hide the file list menu through the .ShowFileList() configuration method.
  2. Subscribe to the Select event.
  3. Get both the directory name and total file size in the Select event handler, and append them to the widget wrapper.
    @(Html.Kendo().Upload()
        .Name("files")
        .Async(a => a
            .Save("Directory_Upload_Chunk_Save", "Home")
            .Remove("Directory_Upload_Remove", "Home")
            .ChunkSize(11000)
        )
        .ShowFileList(false)
        .Directory(true)
        .DirectoryDrop(true)
        .Events(e=>e.Select("onSelect"))
        .Validation(validation =>
        {
            validation.MaxFileSize(20000000);
        })
    )
    <script>
        function onSelect(e) {
            var directoryName = "";
            if (e.files.length) {
                directoryName = e.files[0].rawFile.webkitRelativePath.split("/")[0]; //get the directory name
            }

            var totalFileSize = 0;
            $.each(e.files, function (index, value) {
                totalFileSize += value.size; //sum up the total file size
            })
            var upload = $("#files").data("kendoUpload"); //get the reference of the upload component
            upload.wrapper.append("<div class='k-file'><p class='k-file-name'>Uploaded directory: " + directoryName
            + "</p><p class='k-file-size'>Total file size: "+totalFileSize+" KB</p></div>"); //append the custom content
        }
    </script>

For the complete implementation of the suggested approach, refer to the following Telerik REPL example.

In this article