[Solved] Upload component's auto-upload and drag-and-drop functionality not working

[Chester]

I am working through Telerik's UI for ASP.NET Core tutorial on YouTube ... RPSTrackerASPCore ... and I am at the point where the instructor is walking us through adding an Upload component to the project. I am using a much more recent version of Kendo UI so I have to tweak some things to get them to work properly. So far that hasn't been a problem. But the Upload component has me stumped.

The VS projects are .Net 9.0.

I am using Telerik.UI.for.AspNet.Core (2026.1.325) and I am loading the JavaScript assets as ECMAScript modules. So here is the list of modules I am currently loading:

<script src="~/lib/kendo-ui/mjs/kendo.core.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.button.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.textbox.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.textarea.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.slider.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.tabstrip.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.dataviz.chart.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.grid.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.tilelayout.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.upload.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.draganddrop.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.aspnetmvc.js" type="module"></script>

And here is my component definition:

            @(Html.Kendo().Upload()
                .Name("files")
                .Multiple(true)
                .Async(a => a
                    .Save("SaveAttachmentsAsync", "Upload")
                    .AutoUpload(true)
                )
                .Validation(v => v.AllowedExtensions(new string[] { ".jpg", ".png", ".jpeg" }).MaxFileSize(10485760))
            )

And here is the inline JavaScript generated by the component:

<script type="module">kendo.syncReady(function(){jQuery("#files").kendoUpload({"async":{"autoUpload":true,"saveUrl":null},"multiple":true,"validation":{"allowedExtensions":[".jpg",".png",".jpeg"],"maxFileSize":10485760}});});</script>

I include this because I think it is odd that the async.saveUrl parameter is set to null.

I can use the "Select Files" button to select a file, and they do get added to the file list, but the autoupload functionality is not triggered. And there are no errors in the console. And the drag-and-drop functionality is not active. If I drag an acceptable file over the component the file (an image) just gets opened in a new browser tab.

I have breakpoints in my UploadController.SaveAttachmentsAsync method but they are never hit.

If I submit the form and break on the method that handles the page's form post request I DO see the file included in the request, so at least that part does actually work.

But none of the additional Kendo functionality seems to work. I thought perhaps I am missing an ECMAScript module that needs to be loaded but the documentation doesn't mention any. There are no errors in the browser console so there doesn't seem to be a JavaScript problem happening.

I did replace the modules with the standard vanilla kendo.all.min.js and kendo.aspnetmvc.min.js scripts but I get the exact same behavior.

So what am I missing?

[Nikolay]

Hello Chester,

Thank you for your detailed feedback and for outlining the discrepancies you found. I want to address each point you raised and provide clarifications and additional configuration tips to help you and others who may encounter similar issues.

1. Handler URL Configuration for Razor Pages

• The .SaveUrl("/PageName?handler=HandlerName") approach is the correct way to configure the upload handler for Razor Pages. Using Url.Page("PageName", "HandlerName") can result in saveUrl: null in the generated JavaScript, which prevents the Upload component from functioning as expected.
• The documentation will be updated to clarify this. Your observation is accurate, and using .SaveUrl() ensures the handler URL is correctly resolved.

2. Upload Handler Invocation Behavior

• The Upload component, when in asynchronous mode, sends a separate request for each selected file by default. This means the handler is called once per file, not once per batch, regardless of whether AutoUpload is enabled.
• The handler signature should accept a single IFormFile parameter (e.g., public async Task<IActionResult> OnPostUpload(IFormFile file)), which matches the actual behavior of the component.
• If you want to handle multiple files in a single request you can try the batch functionality. Here is more infprmation: https://www.telerik.com/kendo-jquery-ui/documentation/controls/upload/chunk-upload#uploading-batches-of-files

3. Asynchronous Handler Signature Consistency

• You are correct that the PageModel handler should be asynchronous, especially if you are performing file I/O operations. The example should use public async Task<IActionResult> for clarity and best practice.
• The component configuration and the handler signature should be aligned for a seamless experience.

4. ECMAScript Modules and Asset Loading

• Your list of loaded ECMAScript modules is correct. The essential modules for the Upload component are kendo.upload.js and kendo.draganddrop.js.
• If you switch to using kendo.all.min.js and the behavior is unchanged, the issue is not with missing JavaScript modules but with the handler URL configuration.
• Make sure all scripts are loaded before the Upload component is initialized.

5. Drag-and-Drop and AutoUpload Not Working

• If drag-and-drop opens the file in a new tab, or if auto-upload does not trigger, it usually indicates that the Upload component is not fully initialized due to a missing or invalid saveUrl.
• Once you set .SaveUrl("/PageName?handler=HandlerName") and ensure that saveUrl is not null in the generated JavaScript, both auto-upload and drag-and-drop should work as expected.

 Example Upload Configuration for Razor Pages

@(Html.Kendo().Upload()
    .Name("files")
    .Multiple(true)
    .Async(a => a
        .SaveUrl("/PageName?handler=HandlerName")
        .AutoUpload(true)
    )
    .Validation(v => v.AllowedExtensions(new string[] { ".jpg", ".png", ".jpeg" }).MaxFileSize(10485760))
)

Handler example:

public async Task<IActionResult> OnPostHandlerNameAsync(IFormFile file)
{
    // Your async file processing logic here
    return new JsonResult(new { status = "OK" }, new System.Text.Json.JsonSerializerOptions());
}

Regards,
Nikolay
Progress Telerik

[Chester]

Thank you for the confirmation! I really appreciate it.

[Chester]

I finally got it working! But, I also found a discrepancy in the documentation.

First, on this page ... https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/upload/razor-page ... it says that you can reference your event handler two ways, by using:

Url.Page("PageName", "HandlerName")
// or
Url.Page("/FolderName/PageName", "HandlerName")

or by using:

.SaveUrl("/PageName?handler=HandlerName")

The Url.Page option does not work. When the page is rendered the generated JavaScript for the component has saveUrl:null in it. The .SaveUrl option does work.

Second, the example code implies that one call is made to the handler that sends a collection of IFormFile objects. The example handler signature is:

public ActionResult OnPostSave(IEnumerable<IFormFile> files)

However, that is not what is actually happening. Regardless of whether auto-upload is enabled or not, when the upload happens the handler is called once PER FILE in the file list. So, if you have three files selected the component makes three requests to the handler.

Just to see if it would work I changed my handler signature to:

public async Task<IActionResult> OnPostUpload(IFormFile files)

and it worked just fine.

Third, just a nit-picky thing, but the example code on that page shows the HtmlHelper and TagHelper code explicity configured as asynchronous. However, the PageModel code is not (as you can see from the handler signature I copied from the documentation above).

 

I hope this information helps someone else.