New to Telerik UI for ASP.NET Core? Download free 30-day trial

Validate Selection of Files for Upload

Environment

Product Telerik UI for ASP.NET Core Upload
Operating System All
Browser All
Browser Version All

Description

How can I validate if a file is selected for upload when working with the Telerik UI for ASP.NET Core Upload?

Solution

  • Initialize the Kendo UI Validator and provide a custom rule which validates whether a file in the Upload is selected.
      var validator = $("#myForm").kendoValidator({
            rules: {
            upload: function(input) {
                if (input.attr('name') == "files") {
                    var uploadControl = $("#files").data("kendoUpload"); //get a reference of the Upload component
                    var uploadedFiles = uploadControl.getFiles(); //get the uploaded files

                    return uploadedFiles.length > 0; //assert if there are any files selected
                }

                return true;
              }
            }
        }).data("kendoValidator");
  • Create the Upload component within the Form.
    <form id="myForm" method="post">
        @(Html.Kendo().Upload()
            .Name("files")
            .Messages(m => m.Select("Select Files"))
            .HtmlAttributes(new {validationmessage = "File is required" })
            .Validation(validation => validation
               .MaxFileSize(10485760)
               .MinFileSize(30720)
            )
       )
       <span class="k-invalid-msg" data-for="files"></span>
       <input type="submit" id="submitForm" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md" />
    </form>

Validate on form submission whilst preventing the default behavior.

    $(document).ready(function () {
       $("#submitForm").on("click", function (e) {
           e.preventDefault();
           var validator = $("#myForm").data("kendoValidator");
           if (!validator.validate()) {
            $("#validationSummary").html("<div class='k-messagebox k-messagebox-error'>Oops! There is invalid data in the form.</div>");
           }
           else {
            $("#validationSummary").html("<div class='k-messagebox k-messagebox-success'>Hooray! Your form is valid!</div>");
           }
       });
    });

For the complete example, refer to the following Telerik REPL example:

    <div id="validationSummary"></div>

    <form id="myForm" method="post">
        @(Html.Kendo().Upload()
            .Name("files")
            .Messages(m => m.Select("Select Files"))
            .HtmlAttributes(new {validationmessage = "File is required" })
            .Validation(validation => validation
            .MaxFileSize(10485760)
            .MinFileSize(30720))
        )

        <span class="k-invalid-msg" data-for="files"></span>
        <input type="submit" id="submitForm" />
    </form>
    <script>
          var validator = $("#myForm").kendoValidator({
                rules: {
                upload: function(input) {
                    if (input.attr('name') == "files") {
                        var uploadControl = $("#files").data("kendoUpload");
                        var uploadedFiled = uploadControl.getFiles();

                        return uploadedFiled.length > 0;
                    }

                    return true;
                  }
                }
            }).data("kendoValidator");

        $(document).ready(function () {
            $("#submitForm").on("click", function (e) {
                e.preventDefault();
                var validator = $("#myForm").data("kendoValidator");
                if (!validator.validate()) {
                    $("#validationSummary").html("<div class='k-messagebox k-messagebox-error'>Oops! There is invalid data in the form.</   div>");
                }
                else {
                    $("#validationSummary").html("<div class='k-messagebox k-messagebox-success'>Hooray! Your form is valid!</div>");
                }
            });
        });
    </script>
In this article