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.

Index.cshtml

    @(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.js

    <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.

More ASP.NET Core Upload Resources

• ASP.NET Core Upload Documentation

• ASP.NET Core Upload Demos

• ASP.NET Core Upload Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Display Directory Name and File Size in Upload
• Client-Side API Reference of the Upload for ASP.NET Core
• Server-Side API Reference of the Upload for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base