Validating Upload

10 posts, 1 answers
  1. Joe
    Joe avatar
    62 posts
    Member since:
    May 2012

    Posted 01 Aug Link to this post

    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?
  2. Joe
    Joe avatar
    62 posts
    Member since:
    May 2012

    Posted 01 Aug Link to this post

    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>

     

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 02 Aug Link to this post

    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
  5. Joe
    Joe avatar
    62 posts
    Member since:
    May 2012

    Posted 02 Aug Link to this post

    Thank you, that did the trick.  One of these days I should try out the Kendo Validator component...
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 02 Aug Link to this post

    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
  7. Joe
    Joe avatar
    62 posts
    Member since:
    May 2012

    Posted 02 Aug in reply to Dimiter Madjarov Link to this post

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

  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 04 Aug Link to this post

    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
  9. Joe
    Joe avatar
    62 posts
    Member since:
    May 2012

    Posted 04 Aug in reply to Dimiter Madjarov Link to this post

    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>

     

  10. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 08 Aug Link to this post

    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
  11. Joe
    Joe avatar
    62 posts
    Member since:
    May 2012

    Posted 08 Aug in reply to Dimiter Madjarov Link to this post

    Ok, that makes sense.  Thank you.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready