This is a migrated thread and some comments may be shown as answers.

Validating Upload

11 Answers 540 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 01 Aug 2016, 09:18 PM
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?

11 Answers, 1 is accepted

Sort by
0
Joe
Top achievements
Rank 1
answered on 01 Aug 2016, 09:20 PM

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>

 

0
Dimiter Madjarov
Telerik team
answered on 02 Aug 2016, 07:21 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Joe
Top achievements
Rank 1
answered on 02 Aug 2016, 02:33 PM
Thank you, that did the trick.  One of these days I should try out the Kendo Validator component...
0
Dimiter Madjarov
Telerik team
answered on 02 Aug 2016, 02:44 PM

Hello Joe,

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

Regards,
Dimiter Madjarov
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Joe
Top achievements
Rank 1
answered on 02 Aug 2016, 04:44 PM

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

0
Dimiter Madjarov
Telerik team
answered on 04 Aug 2016, 08:58 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Joe
Top achievements
Rank 1
answered on 04 Aug 2016, 02:38 PM

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>

 

0
Accepted
Dimiter Madjarov
Telerik team
answered on 08 Aug 2016, 07:02 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Joe
Top achievements
Rank 1
answered on 08 Aug 2016, 03:48 PM
Ok, that makes sense.  Thank you.
0
Chris
Top achievements
Rank 1
Veteran
Iron
answered on 19 Jun 2017, 07:11 AM


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

 

 


0
Ivan Danchev
Telerik team
answered on 20 Jun 2017, 01:50 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Upload
Asked by
Joe
Top achievements
Rank 1
Answers by
Joe
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Chris
Top achievements
Rank 1
Veteran
Iron
Ivan Danchev
Telerik team
Share this question
or