Sending a Model Property to the Server When Removing a File from the Upload
Environment
| Product | Telerik UI for ASP.NET MVC Upload |
| Progress Telerik UI for ASP.NET MVC version | Created with the 2023.1.117 version |
Description
I use the Upload component in asynchronous mode, and by using its Files() configuration, I display an initial list of files when the page loads.
How can I pass a View Model property Id to the server when the user removes a file from the Upload list?
Solution
- Populate the Ids of the initially rendered files in hidden input elements on the same View, where the Upload component is defined.
@model UserViewModel
@foreach(var file in Model.Files)
{
<input id="fileID_@file.Name" type="hidden" value="@file.Id" />
}
@(Html.Kendo().Upload()
.Name("files")
.Async(a => a
.Save("Save", "Upload")
.Remove("Remove", "Upload")
.AutoUpload(true)
)
.Files(files =>
{
if(Model.Files != null)
{
foreach (var file in Model.Files)
{
files.Add().Name(file.Name).Extension(file.Extension).Size(file.Size ?? 0);
}
}
})
)
using Kendo.Mvc.UI;
public class UserViewModel
{
public List<UploadPdfFile> Files { get; set; }
}
public class UploadPdfFile : UploadFile
{
public long Id { get; set; }
}
- Handle the
Removeevent of the Upload that triggers when an uploaded file is about to be removed. Get theIdof the file that will be removed from the respective hidden input, and send it to the server through the Upload Remove request.
@model UserViewModel
@foreach(var file in Model.Files)
{
<input id="fileID_@file.Name" type="hidden" value="@file.Id" />
}
@(Html.Kendo().Upload()
.Name("files")
.Events(ev => ev.Remove("onRemove"))
...
)
<script>
function onRemove(e) {
var fileName = e.files[0].name; // Get the name of the file that will be removed.
var customFileId = 0;
$.each($("input[id^='fileID_']"), function () { // Loop through the hidden inputs.
var name = $(this).attr('id').split('_')[1]; // Extract the "Name" from the "id" attribute.
if (name == fileName) {
customFileId = $(this).val(); // Store the "Id" property of the file.
}
});
e.data = { // Attach a data object to the passed event.
fileId: customFileId
};
}
</script>