Check File type at client side – jQuery

Whenever we use fileupload control on web pages, the common requirement is to validate its file type and size.

We usually find it difficult to validate file size on client side rather than at server side. As of now, there is no alternative script found that can achieve this. There are certain alternatives to achieve the above validation on client side but that are not browser compatible & as security level changes in browser, it stops functioning, so we are still not at that level of trust that we can check file size at client side using jQuery/JavaScript.

Although it is possible to validate filetype using jquery/JavaScript and I am looking to do some coding for you to achieve the same, I hope this will help some developers to validate file type at client side rather than checking it on server.

Here is the JavaScript code that achieves the above functionality :

 <script src="Js/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">

        function FileTypeValidate() {

            //get filepath from fileupload control on the page
            var fileUpload = $('#<%=FileUpload1.ClientID %>').val();

            //extracting part of the filename from dot
            var extension = fileUpload.substring(fileUpload.lastIndexOf('.'));

            //valid file type - static
            var ValidFileType = ".jpg , .png , .bmp";
            //or fetch it from config file for flexibility ,
            //we can save valid file type list in web.config also & 
            //fetch it during validation process
            var ValidFileTypeConfig = 
		'<%=ConfigurationManager.AppSettings["ValidFileType"].ToString() %>';

            //check whether user has selected file or not
            if (fileUpload.length > 0) {

                //check file is of valid type or not
                if (ValidFileType.toLowerCase().indexOf(extension) < 0) {
                    alert("please select valid file type...");
                }
                else {
                    alert("file type is valid...");
                    return true;
                }
            }
            else {
                alert("please select file for upload...");
            }
            return false;
        }
    </script>

The above code explains itself a lot so there is no need to discuss further on it.

Here is the HTML markup that shows controls on the page:

    <form id="form1" runat="server">
     <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="Upload" 
		OnClientClick="return FileTypeValidate();" />
     </div>
    </form>

This is a very simple, but very common scenario for the web applications & very effective if managed properly…

That's it, hope this will help !!!

Jay Ganesh