When the Upload has Initial Files, the RemoveUrl endpoint is not called when the user removes them from the UI.
===
TELERIK EDIT
The current workaround is to call the RemoveUrl in the Upload's OnRemove event handler. This is also applicable when you need to send additional custom data with the file name.
.razor file
@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);
}
}
}
Program.cs
builder.Services.AddHttpClient();
Please provide item templates for the file list, similar to:
I am trying to upload files to an URL that is not in my control and it requires the PUT HTTP method. The Telerik Blazor Upload always uses a POST.
I imagine API like this would be nice:
<TelerikUpload SaveUrl="@SaveUrl" SaveMethod="PUT">
</TelerikUpload>
---
ADMIN EDIT
In the meantime, there are two possible solutions:
---
Is it possible to programmatically perform actions on the uploader, such as to remove files, rather than having to click on the remove button on each uploaded file?
---
ADMIN EDIT
Might be related to the ability to have initial files shown in the list: https://feedback.telerik.com/blazor/1485660-initial-files-in-blazor-upload.
At the moment, you could try using JS Interop to loop over the list, determine which file you want to remove and .click() its remove button. Here is a basic example of getting the buttons to click the second one. You could traverse the DOM to get the file name, or you could keep a collection of the files to use indexes in a fashion similar to this example.
@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");
}
}
---