We need to support to upload large files (Bigger than 2.1GB). Typical data size we are dealing with is around 1 ~ 10GB
The current MaxFIleSize only support 2,147,483,648 (2GB) due to the use of type int.
Please change the type of MaxFileSize property of TelerikUpload control so that it support file uploading for more than 2.1GB.
The upload status hangs on "Uploading..." if the Upload component is hosted in a Dialog and the OnSuccess event is used.
<AdminEdit>
As a workaround, you can host the Upload in a Window, where this issue is not present
</AdminEdit>
Accessibility issue
impacts screen reader user
[WCAG 1.3.1 level A] [WCAG 4.1.3 level AA]
tested using NVDA on chrome browser
on selecting upload button (w/ files already chosen) user is not advised the overall status of the files or individual files.
A visual user is informed;
This has not been 100% tested, as the upload was not targeted to an end point.
Suggestion: use aria-live
Also note, on selecting the upload button the focus is returned to input, and input says no files.
impacts keyboard user
[WCAG 2.1.1 level A]
tested using NVDA on chrome browser
the ability to remove, review, & navigate (with direction keys) each item chosen for upload is not directly accessible via a keyboard, To overcome this the user needs a screen reader to read line by line.
At least, a screen reader user can do the following inside the list:
Impacts screen reader users
[WCAG 1.3.1 level A] [WCAG 4.1.3 level AA]
tested using NVDA on chrome browser
input (type="file") status always reads as 'no file chosen' when one or more files have been chosen (correct when no files are chosen).
on choosing a file to upload (so no file chosen yet), screen reader advises; web page title, chrome, page contents, file input status (same behaviour as default html 5 file input). On choosing a file a default browser html 5 file input will advise a file has been chosen. The list shown below the Telerik component is not known to a screen reader user
<TelerikUpload SaveUrl="@SaveUrl"
RemoveUrl="@RemoveUrl"
AllowedExtensions="@( new List<string>() { ".pdf", ".docx" } )"
OnSelect="@OnSelectHandler"
OnCancel="@OnCancelHandler"
OnRemove="@OnRemoveHandler">
</TelerikUpload>
When the AllowedExtensions is set for the Telerik Upload control, it is expected that the File selection dialog box should filter the files by the file types in the Allowed extensions only. However, the dialog shows all files.
------
ADMIN EDIT
This will likely be exposed via the accept attribute the <input type=file> exposes. Note that it requires MIME types, not extensions.
At the moment, the extension can be filtered only after the file is selected: https://docs.telerik.com/blazor-ui/components/upload/validation.
-----
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.
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