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
The request also applies to the FileSelect component.
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");
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");
}
}
---
Right now we are hiding it based on styling.
.k-file-success{
display:none !important;
}
We do this to provide a customized display of files uploaded.
Like in the Kendo Upload https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/configuration/files - I want to show some files initially to my user
=====
ADMIN EDIT:
A possible workaround is to use a ListView and mimic the Upload/FileSelect interface:
<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; }
}
}
I would like to have my users click my own button or element to trigger the file select dialog that you get from clicking the "Select Files..." button on the Upload component.
A workaround is to use a function like this
window.customUploadClick = function () {
$('.k-upload-button input').trigger('click');
}
---
ADMIN EDIT
Completed with 3.0.0 release
If you are not using jQuery already, you don't have to add it for this, standard browser API can do this too:
@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");
}
}
---
I would like to have the upload component but change the text on the button (or maybe its entire content through a render fragment template) through a Parameter on the component level.
At the moment I can only do this through localization for all components.
---
ADMIN EDIT
---
The request targets both the Upload and the FileSelect components.
e.g. for the file "Golf & Country Club.png" the file info name is "Golf & Country Club" which leads to an exception.
In version 2.9.0 of the library there are two small spelling issues:
Scheduler_Recurrence_Editor_Frequencies_Monthly: Montly //Montly is written without "h"
Upload_InvalidMinFileSize: File size too small //Missing dot after the message (E.g. Upload_InvalidMaxFileSize has an ending dot).
Best regards,
Christian