Validating Upload

[Joe]

I have a form that has a couple of textboxes and the Kendo Upload control.  I also haven event on the submit button to ensure the textboxes have appropriate values in it, but how do I validate the upload?  Or IOW, how do I validate the user has actually selected a file before submitting the form?

[Joe]

Here is my code thus far:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div style="width: 40%">
    <form method="post" action='@Url.Action("Result", "Mapping")'>
        @(Html.Label("Client ID: ")) @(Html.TextBox("clientID", ""))<br/>
        @(Html.Label("How Many Header Rows Will Be In This File? ")) @(Html.TextBox("headerCount", 1))
        <div class="k-content">
            @(Html.Kendo().Upload()
                .Name("files")
                .HtmlAttributes(new { accept = ".csv" })
                .Multiple(false)
            )

            <p></p>

            <div style="text-align: right">
                @(Html.Kendo().Button()
                    .Name("submit")
                    .Content("Upload")
                    .HtmlAttributes(new { type = "submit", @class = "k-button k-primary" })
                    .Events(ev => ev.Click("onClick"))
                )
            </div>
        </div>
    </form>
</div>

<script>
    $(document)
        .ready(function() {
            $("#files").closest(".k-upload-button").find("span").text("Select CSV File...");
        });

    function onClick(e) {
        var theClient = $("#clientID").val();
        if (theClient === "") {
            alert("No Client ID Entered");
            e.cancel = true;
        }

        // how to validate the user selected a file?
    }
</script>

 

[Dimiter Madjarov]

Hello Joe,

You could use the following or similar expression to achieve the task.
E.g.

$("#files").closest(".k-upload").find(".k-file").length > 0;

Regards,
Dimiter Madjarov
Telerik by Progress

[Joe]

Thank you, that did the trick.  One of these days I should try out the Kendo Validator component...

[Dimiter Madjarov]

Hello Joe,

Thank you for the update. I am glad the issue is resolved.

Regards,
Dimiter Madjarov
Telerik by Progress

[Joe]

So I'm trying to implement the Validator component now, and it's working for my textboxes/fields, but not the uploader.  I'm using the code found here but it doesn;t seem to do what I think it should...

Here's my javascript:

$(document).ready(function() {
       $("#files").closest(".k-upload-button").find("span").text("Select CSV File...");

       var validator = $("#csvForm").kendoValidator({
           rules: {
               upload: function(input) {
                   if (input[0].type === "file") {
                       return input.closest(".k-upload").find(".k-file").length;
                   }
                   return true;
               }
           }
       }).data("kendoValidator");

       var status = $("#status");

       $("form").submit(function(event) {
           if (!validator.validate()) {
               status.innerHTML = "Invalid Responses";
               event.preventDefault();
           }
       });
   });

 

I'm not really sure what it's supposed to do...

[Dimiter Madjarov]

Hello Joe,

This example is very old and the reason for this behavior is a change in the Upload widget, which was made afterwards - it temporary adds a disabled attribute to it's input element if it's value is empty, in order to prevent submitting an empty input. The Kendo UI Validator on the other hand does not validate disabled elements and skips them.

In order to workaround this, you could manually remove the disabled attribute in the form submit event handler. Here is an example that demonstrates the approach.

Regards,
Dimiter Madjarov
Telerik by Progress

[Joe]

That seems to do the trick, sometimes.  It's weird but sometimes the validation message doesn't show unless it's the only thing that doesn't pass validation.  I have 3 form fields, all with validations on them.  If they are all empty, only the validation messages for the two textboxes show up.  If I fill them in, but don;t select a file, then and only then do I get the error message about having to select a file.  There was one time the error didn;t show up at all after pressing the button, but the form didn;t do anything either.  When I hit the button a 2nd time, then the error showed.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div style="width: 40%">
    <form method="post" id="csvForm" action='@Url.Action("Result", "Mapping")'>
        @(Html.Label("Client ID: "))
        @(Html.Kendo().TextBox()
            .Name("clientID")
            .HtmlAttributes(new { placeholder = "Client ID", required = "required", validationmessage = "Enter {0}"}))

        <br/>

        @(Html.Label("How Many Header Rows Will Be In This File? "))
        @(Html.Kendo().TextBox()
            .Name("headerCount")
              .HtmlAttributes(new {placeholder = "header count", required = "required", validationmessage = "Enter {0}"}))
        <br/>

        <div class="k-content">
            @(Html.Kendo().Upload()
                .Name("files")
                .HtmlAttributes(new {accept = ".csv", placeholder = "", required = "required", validationmessage = "Please select file to upload" })
                .Multiple(false)
            )
            <span class="k-invalid-msg" data-for="files"></span>
            <p></p>

            <div style="text-align: right">
                @(Html.Kendo().Button()
                    .Name("submit")
                    .Content("Upload")
                    .HtmlAttributes(new {type = "submit", @class = "k-button k-primary"})
                )
            </div>
        </div>

        <div id="status"></div>
    </form>
</div>

<script>
    $(document).ready(function() {
        $("#files").closest(".k-upload-button").find("span").text("Select CSV File...");

        var validator = $("#csvForm").kendoValidator({
            rules: {
                upload: function(input) {
                    if (input[0].type === "file") {
                        return input.closest(".k-upload").find(".k-file").length;
                    }
                    return true;
                }
            }
        }).data("kendoValidator");

        var status = $("#status");

        $("form").submit(function (event) {
            $("#files").removeAttr("disabled");

            if (!validator.validate()) {
                status.innerHTML = "Invalid Responses";
                event.preventDefault();
            }
        });
    });
</script>

 

[Dimiter Madjarov]

Hello Joe,

The described behavior is expected. When a default validation rule has failed (in this case the required fields), the logic inside the submit event handler is not executed at all and the message for the Upload is not displayed for the same reason discussed in the previous post - disabled inputs are not validated.

Regards,
Dimiter Madjarov
Telerik by Progress

[Joe]

Ok, that makes sense.  Thank you.

[Chris]

HI

I want to upgrade my project from Q2 2016 to R2 2017,
And I have test the R2 2017 but found a problem about Upload : 

In Q2 2016, The error event would be fired while the file size exceed maxAllowedContentLength,
But In R2 2017, the error event not fired anymore(complete event not fired too).

How can I catch the message (in client) while ANY validation message has generated (include validation.maxFileSize exceeded) ?

      $("#files").kendoUpload(
      { 
        validation:
        {
          maxFileSize: 1024 * 1024,
          minFileSize: 1
        },

Best regards

Chris

 

 

[Ivan Danchev]

Hello Chris,

The Upload's validation functionality was added in Q3 2016. Since this release the error event does not fire when the selected file does not pass the validation (invalid file extension or size), because in this case the upload operation has not started, whereas the error event indicates a failed upload operation. You can however get the validation error in the Upload's select event, as demonstrated in this dojo example.

Regards,
Ivan Danchev
Progress Telerik