jQuery Validation for ASP.NET File Upload Control to Validate the File Type and Size

• Download source code (RAR) - 99.5 KB
• Download source code (ZIP) - 107.6 KB

Introduction

jQuery validation is a good choice for client side validation. It makes it easy to validate server control on client side. In this article, I going to explain how to validate ASP.NET file upload control file type and size on client side by using jQuery validation plug in.

Using the Code

ASP.NET FileUpload control is used to upload any type of file. To select specific format of file, we have to write some code behind it and check the condition for specified format file on server side.

It is a good idea to have client side validation as the user gets to know what needs to be changed immediately, that is no round trips to the server are made. So from the user's point of view, it give him fast response and from the developer's point of view, it saves valuable resource of server.

<script src="Scripts/jquery-1.11.1.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script src="Scripts/additional-methods.js"></script>

write the following code in script tag to validate the form with ASP.NET file upload control.

<script type="text/javascript">
        $(document).ready(function () {
            $("#<%=form1.ClientID%>").validate({
                errorElement: "em",
                errorPlacement: function (error, element) {                    
                    error.insertAfter(element.parent());
                },
                errorClass: "hasError"
            });
            //Add rules for File upload control
            $("#<%=FileUpload1.ClientID%>").rules('add', {
                required: true,
                accept:"image/jpeg,image/jpg",
                fileSize: true,
                messages:{
                    accept: "Invalid file format"
                }
            });
            //custom validation method for file size
            $.validator.addMethod("fileSize", function (value, element) {
                files = element.files;
                size = files[0].size;
                if (size > 71680) {
                    return false;
                }
                return true;
            }, 'file should be upto 70 kb');
            $(document).on("change", function () {
                $("#<%=form1.ClientID%>").valid();
            });
        });

    </script>

In the above code, add rules for file upload control by selecting it with id. First rule is required which is a common rule for mandatory field. Second rule is accept which specifies the type of file we needed. You can specify multiple file-types by separating them with a comma, e.g. "image/x-eps,application/pdf". This method is available in additional-methods.js. This method is used to look at just the filename, specifically the file extension. That behaviour is now available as the "extension" method inside additional-methods.js. The last rule is fileSize which is custom validation method. It must consist of a name (must be a legal JavaScript identifier), a JavaScript based function and a default string message. That method has logic to get the size to file and compare it with specified size.

Points of Interest

It is a great choice to validate the ASP.NET FileUpload control on client side. It saves round trips to server that are made.