Display Directory Name and File Size in Upload

Environment

Product	Telerik UI for ASP.NET MVC Upload
Progress Telerik UI for ASP.NET MVC 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 MVC 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 MVC Upload Resources

• ASP.NET MVC Upload Documentation

• ASP.NET MVC Upload Demos

• ASP.NET MVC Upload Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

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