Kendo MVC upload control, validation doesn't display any message

[Peter]

I'm using Kendo v 2023.2.606 from the Kendo CDN.
In my view I have the following code:

<div class="row row-cols-lg-auto gx-3 gy-2 align-items-baseline mt-2">
    <div class="col">
        <h4>Choose File</h4>
        <!-- upload a file -->
        @(Html.Kendo().Upload()
            .Name("files")
            .Multiple(false)
            .ShowFileList(false)
            .Async(_ => _
                .Save("SubmitFile", "DataImport", new { Area = "Admin" })
                .Batch(true)
                .AutoUpload(true)
            )
            .Events(_ => _
                .Upload("onUpload")
                .Success("onUploadSuccess")
                .Error("onUploadFail")
            )
            .Validation(_ => _
                .AllowedExtensions(new string[] { "xls", "xlsx", "csv" })
                .MaxFileSize(3145728)
            )
        )
    </div>
</div>

If I select a file with an extension that is not listed, e.g. .zip, or I select a file that is more than 3.14MB all I see is this:

It does not hit my MVC controller action (which is fine) but the only indication of a problem is the (!) icon. The icon is not clickable.

Why is it not displaying a message saying the file is not valid/too big?

[Ivan Danchev]

Hello Peter,

The Upload shows the validation messages in the file list for every file that fails the validation. So to see the messages enable the ShowFileList option (it is disabled in the code snippet you posted). Here's an example in which the validation messages show up correctly: https://netcorerepl.telerik.com/mekncubQ51fSJX4B07

To test it, you can select a .png file or an .xlsx file bigger than the specified MaxFileSize.

One additional note, I can see a "Choose File" button on the screenshot you posted. It should not be visible and only the "Select files..." button should appear. The fact that it is visible could indicate an incorrect initialization of the component. It could be caused by a js exception on the page, or a duplicate Name of the component (two components on the page with the same Name), or incorrectly loaded Kendo client side resources, etc. 

Regards,
Ivan Danchev
Progress Telerik

[Peter]

Hi Ivan,

Thanks for the response. Setting ShowFileList to true, as indicated allows the validation messages to be shown, excellent.

There are no JS error in dev tools console, nor is there any other element with the name/id of "files". The markup generated by Kendo is:

<div class="row row-cols-lg-auto gx-3 gy-2 align-items-baseline mt-2">
  <div class="col">
    <h4>Choose File</h4>
    <!-- upload a file -->
    <div class="k-upload k-upload-async k-upload-empty" role="application">
      <div class="k-dropzone k-upload-dropzone">
        <div class="k-upload-button-wrap">
          <div
            class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-upload-button"
            tabindex="0"
            role="button"
          >
            <span class="k-button-text">Select files...</span>
          </div>
          <input
            id="files"
            name="files"
            type="file"
            data-role="upload"
            aria-label="Select files..."
            tabindex="-1"
            aria-hidden="true"
            autocomplete="off"
          />
        </div>
        <span class="k-dropzone-hint">drop files here to upload</span>
      </div>
    </div>
    <script>
      kendo.syncReady(function(){jQuery("#files").kendoUpload({"upload":onUpload,"success":onUploadSuccess,"error":onUploadFail,"async":{"autoUpload":true,"batch":true,"saveUrl":"/Admin/DataImport/SubmitFile"},"multiple":false,"showFileList":true,"validation":{"allowedExtensions":["xls","xlsx","csv"],"maxFileSize":3145728}});});
    </script>
  </div>
</div>

I used a HTML pretty print online site so it's not quite like this but it make it easier to read.

In the dev tools console there is a warning about kendo license not being activated as during development we don't apply one, only in production.

The "Select files..." span does get a hand cursor when you point at it, but clicking it does nothing.

[Ivan Danchev]

Peter,

Attached you can find a sample project that has an Upload in the Index view. The project uses version 2023.2.606 and the upload works as expected, including selecting a file through the dialog that opens after clicking on the "Select File..." button.

Please modify the sample project accordingly so that it demonstrates the problematic behavior and attach it back for further review, or attach a similar sample project that replicates the issue.

[Peter]

The first thing to note is that the sample project uses MVC 5 / .NET 4.7, whereas we are using .NET 8 and MVC Core, note sure if that would cause a difference.

In the sample you provided comparing the CSS to what we have, I can see the main difference is that the [input type="file"] is being set with an opacity of 0 and is position bottom and right of 0, whereas our CSS does not do that. So it would seem that CSS is the issue here. If I transfer all but the font details from the file input to the input in dev tools then it doesn't show in the same way as in your sample.

However, in your sample there is no hand/pointer cursor when you point at the "Select files..." span. Given the [input type="file"] is opaque and on top of the "Select files..." span there is no way to make it properly look like you are pointing at something clickable because the invisible button part of the HTML file input covers part of the span meaning you don't get the cursor caused by the CSS.

Seems like it would be better if the file input was positioned below the "Select files..." span, or made visually hidden, and JS was used to trigger the file selection. That way you would directly be clicking on the "Select files..." span and there would be no need for all the CSS setting the position, z-index, size and cursor of the file input.

[Ivan Danchev]

Peter,

The difference between the MVC and the Core Upload would be only on the server-side implementation of the Save and Remove actions. The example in this section of the documentation shows how the Save and Remove actions would look like for .NET / ASP.NET Core: https://docs.telerik.com/aspnet-core/html-helpers/editors/upload/modes-of-operation

Otherwise the Upload component's configuration is the same.

As for the missing hand cursor on hovering the select button, this has been resolved and is not reproducible with the latest version. I tested it in the sample project I attached in my previous reply. When upgraded to version 2024.1.319 and the kendo theme to 7.2.1, the hand cursor appears as expected when hovering the button.

If you upgrade to 2024.1.319, make sure you are using a compatible theme version. A single kendo theme file should be loaded (old ones must be removed) and the compatible theme version is 7.2.1. The reference could look like this:

<link href="https://kendo.cdn.telerik.com/themes/7.2.1/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />

On a side note, there is a separate forum for the UI for ASP.NET Core components: https://www.telerik.com/forums/aspnet-core-ui  Since you are using .NET 8, in the future you can open new forum threads in it instead of in the MVC forum.

[Peter]

Thanks for the reply. Sorry for posting in the wrong place. Still fairly new to .NET 8 (Core) so in my head I'm still using MVC in the same way as I was in .NET 4.8 with MVC 5, I don't think of them as separate things., just MVC.

Thanks for confirming the latest version fixes the "select files..." span issue.

[Ivan Danchev]

Peter,

No problem at all. We can also move threads from one forum to the other, when needed.

On the subject of the frameworks, I totally agree that it can be confusing at times. There's .NET Framework, then ASP.NET Core came out and after v3.1 ASP.NET Core evolved into .NET 5 (with the current version being 8).

An easier way to determine which is the right forum is to go by the product the respective application uses. Say for instance the application has the Telerik.UI.for.AspNet.Core NuGet package installed. This means that the product is Telerik UI for ASP.NET Core.