Sending a Model Property to the Server When Removing a File from the Upload

Environment

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

1. Populate the Ids of the initially rendered files in hidden input elements on the same View, where the Upload component is defined.

View_HtmlHelper

  @model UserViewModel

  @foreach(var file in Model.Files)
  {
      <input id="[e-mail]" 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);
                }
            }
        })
  )

View_TagHelper

    @addTagHelper *, Kendo.Mvc
    @model UserViewModel

    @foreach(var file in Model.Files)
    {
      <input id="[e-mail]" type="hidden" value="@file.Id" />
    }
    <kendo-upload name="files">
        <async save-url="@Url.Action("Save","Upload")" remove-url="@Url.Action("Remove","Upload")"  auto-upload="true"/>
        <files>
            @{
                if(Model.Files != null)
                {
                    foreach (var file in Model.Files)
                    {
                        <file name="@file.Name" extension="@file.Extension" size="@file.Size" />
                    }
                }
            }
        </files>
    </kendo-upload>

C#

  using Kendo.Mvc.UI;

  public class UserViewModel
  {
      public List<UploadPdfFile> Files { get; set; }
  }

  public class UploadPdfFile : UploadFile
  {
	public long Id { get; set; }
  }

2. Handle the Remove event of the Upload that triggers when an uploaded file is about to be removed. Get the Id of the file that will be removed from the respective hidden input, and send it to the server through the Upload Remove request.

View_HtmlHelper

  @model UserViewModel

  @foreach(var file in Model.Files)
  {
      <input id="[e-mail]" type="hidden" value="@file.Id" />
  }

  @(Html.Kendo().Upload()
        .Name("files")
        .Events(ev => ev.Remove("onRemove"))
        ...
  )

View_TagHelper

    @addTagHelper *, Kendo.Mvc
    @model UserViewModel

    @foreach(var file in Model.Files)
    {
      <input id="[e-mail]" type="hidden" value="@file.Id" />
    }
    <kendo-upload name="files" on-remove="onRemove">
        <!-- Other configuration -->
    </kendo-upload>

Html

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

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

• Client-Side API Reference of the Upload for ASP.NET Core

• Server-Side API Reference of the Upload for ASP.NET Core

• Server-Side TagHelper 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