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
- Hide the file list menu through the
.ShowFileList()configuration method. - Subscribe to the
Selectevent. - Get both the directory name and total file size in the
Selectevent 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.