Validating Upload

12 posts, 1 answers
  1. Joe
    Joe avatar
    183 posts
    Member since:
    May 2012

    Posted 01 Aug 2016 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
    183 posts
    Member since:
    May 2012

    Posted 01 Aug 2016 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. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 02 Aug 2016 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
  4. Joe
    Joe avatar
    183 posts
    Member since:
    May 2012

    Posted 02 Aug 2016 Link to this post

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

    Posted 02 Aug 2016 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
  6. Joe
    Joe avatar
    183 posts
    Member since:
    May 2012

    Posted 02 Aug 2016 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...

  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 04 Aug 2016 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
  8. Joe
    Joe avatar
    183 posts
    Member since:
    May 2012

    Posted 04 Aug 2016 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>

     

  9. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 08 Aug 2016 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
  10. Joe
    Joe avatar
    183 posts
    Member since:
    May 2012

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

    Ok, that makes sense.  Thank you.
  11. Chris
    Chris avatar
    55 posts
    Member since:
    Oct 2015

    Posted 19 Jun in reply to Dimiter Madjarov Link to this post


    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

     

     


  12. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1249 posts

    Posted 20 Jun Link to this post

    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.
Back to Top