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

Razor

      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.

Razor

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

Razor

    $(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:

Index.cshtml

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

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

More ASP.NET Core Upload Resources

• ASP.NET Core Upload Documentation

• ASP.NET Core Upload Demos

• ASP.NET Core Upload Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Upload for ASP.NET Core
• Server-Side API Reference of the Upload for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base