@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");
    }
}

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

<TelerikUpload SaveUrl="@SaveUrl"
                               RemoveUrl="@RemoveUrl"
                               AllowedExtensions="@( new List<string>() { ".pdf", ".docx" } )"
                               OnSelect="@OnSelectHandler"
                               OnCancel="@OnCancelHandler"
                               OnRemove="@OnRemoveHandler">
                </TelerikUpload>

@inject IJSRuntime _js

@* move this script to a correct location it's here as ahack to make the snippet shorter and easy to copy  *@
<script suppress-error="BL9992">
    function removeSecondFile(){
        var deleteButtons = document.querySelectorAll("li.k-file button span.k-delete");
        if(deleteButtons && deleteButtons.length > 1){
            deleteButtons[1].click();
        }
    }
</script>

<TelerikUpload AutoUpload="false" SaveUrl="my-endpoint"></TelerikUpload>
<TelerikButton OnClick="@RemoveSecondFile">Remove second file</TelerikButton>

@code{
    async Task RemoveSecondFile()
    {
        await _js.InvokeVoidAsync("removeSecondFile");
    }
}

        <TelerikUpload SaveUrl="@SaveUrl" SaveMethod="PUT">

        </TelerikUpload>

@inject HttpClient HttpClient

<TelerikUpload OnRemove="@OnUploadRemove" RemoveUrl="@RemoveUrl" />

@code {
    private string RemoveUrl { get; set; } = "api/upload/remove";

    private async Task OnUploadRemove(UploadEventArgs args)
    {
        // code for non-initial files
        // send optional custom data to the controller
        args.RequestData.Add("requestKey", "custom value");

        // code for initial files
        // call the RemoveUrl
        if (args.Files.First().Status == UploadFileStatus.Blank)
        {
            var multipartContent = new MultipartFormDataContent();

            multipartContent.Add(new StringContent(args.Files.First().Name), "files"); // "files" must match the RemoveField value
            multipartContent.Add(new StringContent("requestKey"), "custom value"); // send optional custom data to the controller

            await HttpClient.PostAsync(RemoveUrl, multipartContent);
        }
    }
}

builder.Services.AddHttpClient();