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.

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();

Ref: https://demos.telerik.com/kendo-ui/upload/initialfiles

TelerikUpload control is a good start. However, missing an important feature of initial files. When can we expect this feature to be added to the control?

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;

• overall status as 'done'.
• completeness of individual files

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.

Accessibility issue

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:

• be advised (when forcefully reading line by line); how many items in list, filename, file is incorrect or file size, (optional) reload button, and remove button.
• use 'del' key to remove an item. 

accessibility issue - upload is not notifying files are chosen

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

Please provide item templates for the file list, similar to:

• https://www.telerik.com/kendo-angular-ui/components/uploads/upload/templates/
• https://demos.telerik.com/kendo-ui/upload/templates

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:

• Upload the file to your own server that can accept POST and use that server to upload to the third party. This can help hide URLs and security from your end users as well.
• Implement a FileSelect type of component to get the file in code and upload it with your own HTTP request from C#.

---

<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.

-----

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

---