<TelerikUpload SaveUrl="api/upload/save"
               RemoveUrl="api/upload/remove">
</TelerikUpload>

@{
    if (OldFiles.Any())
    {
        <p>Older files:</p>

        <div class="k-upload">
            <ul class="k-upload-files k-reset">
                <TelerikListView Data="@OldFiles" @ref="@ListView">
                    <Template>
                        <li class="k-file k-file-success">
                            <div class="k-file-single">
                                <span class="k-file-group-wrapper">
                                    <span class="k-file-group k-icon k-i-file"></span>
                                </span>
                                <span class="k-file-name-size-wrapper">
                                    <span class="k-file-name " title="@context.Name"> @context.Name </span>
                                    <span class="k-file-validation-message k-text-success">Existing file.</span>
                                </span>
                                <span class="k-upload-status">
                                    <TelerikButton ButtonType="@ButtonType.Button" Title="Remove"
                                                   OnClick="@( _ => RemoveOldFile(context) )"
                                                   Icon="x" FillMode="@ThemeConstants.Button.FillMode.Flat" />
                                </span>
                            </div>
                        </li>
                    </Template>
                </TelerikListView>
            </ul>
        </div>
    }
}

@code {
    TelerikListView<UploadedFile> ListView { get; set; }

    List<UploadedFile> OldFiles { get; set; } = new List<UploadedFile>()
    {
        new UploadedFile() { Id = 1, Name = "foo.txt" },
        new UploadedFile() { Id = 2, Name = "bar.txt" },
    };

    async Task RemoveOldFile(UploadedFile file)
    {
        // delete the file from the remote server...
        // ...
 
        // update the client UI
        OldFiles.Remove(file);
        ListView.Rebind();
    }

    public class UploadedFile
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

@inject IJSRuntime _js

<script suppress-error="BL9992">
    window.customUploadClick = function () {
        document.querySelector(".k-upload-button input").click();
    }
</script>

<TelerikButton OnClick="@InvokeSelectClick">invoke click</TelerikButton>

<TelerikUpload></TelerikUpload>

@code{
    async Task InvokeSelectClick()
    {
        await _js.InvokeVoidAsync("customUploadClick");
    }
}