how to pass id as a parameter of FileUpload to javascript function to check extension and size of file

Question

I am working on asp.net web application in which i have 6 FileUpload Controls for one file upload i have created a javascript method to check file extension and file size. but how to pass id of FileUpload upload dynamically so that only in only one method i can validate all FileUpload my code of javacript is

  var validFilesTypes = ["bmp", "gif", "png", "jpg", "jpeg", "doc", "docx",         "xls", "xlsx", "htm", "html", "rar", "zip", "txt", "pdf"];
    function CheckExtension() {
        /*global document: false */
        var file = document.getElementById("<%=txtTenderDoc.ClientID%>");
        var path = file.value;
        var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
        var isValidFile = false;
        for (var i = 0; i < validFilesTypes.length; i++) {
            if (ext == validFilesTypes[i]) {
                isValidFile = true;
                break;
            }
        }
        if (!isValidFile) {
            alert("Invalid File. Unknown Extension Of Tender Doc" + "Valid extensions are:\n\n" + validFilesTypes.join(", "));
        }
        return isValidFile;
    }

    function validateFileSize() {
        /*global document: false */
        var file = document.getElementById("<%=txtTenderDoc.ClientID%>");
        var fileSize = file.files[0].size;
        var isValidFile = false;
        if (fileSize !== 0 && fileSize <= 25214400) {
            isValidFile = true;
        }
        if (!isValidFile) {
            alert("File Size Should be Greater than 0 and less than 25 mb");
        }
        return isValidFile;
    }

and i have used this in aspx page

<asp:FileUpload ID="txtTenderDoc" onchange="var result= CheckExtension();validateFileSize(); return result"
                        runat="server"></asp:FileUpload>

as you can see i have to create 6 method by this to check file size and file extension how to do that in only one method....

Answer 1

function CheckExtension(Id) {
    /*global document: false */
    var file = document.getElementById(Id);
    var path = file.value;
    var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
    var isValidFile = false;
    for (var i = 0; i < validFilesTypes.length; i++) {
        if (ext == validFilesTypes[i]) {
            isValidFile = true;
            break;
        }
    }
    if (!isValidFile) {
        alert("Invalid File. Unknown Extension Of Tender Doc" + "Valid extensions are:\n\n" + validFilesTypes.join(", "));
    }
    return isValidFile;
}   


function validateFileSize(Id) {
    /*global document: false */
    var file = document.getElementById(Id);
    var fileSize = file.files[0].size;
    var isValidFile = false;
    if (fileSize !== 0 && fileSize <= 25214400) {
        isValidFile = true;
    }
    if (!isValidFile) {
        alert("File Size Should be Greater than 0 and less than 25 mb");
    }
    return isValidFile;
}

<asp:FileUpload ID="txtTenderDoc" onchange="var result=      CheckExtension('textTenderDoc');validateFileSize('textTenderDoc'); return result"  runat="server"></asp:FileUpload>

I'm assuming that your creating six different file upload controls. This way you can pass the id into the java script at compile time so you have only one method.

Answer 2

after searching on net finally i have solved the issue and posting it so that if anyone had similar problem this should help

 // set which files are allowed in FileUpload Control
    var validFilesTypes = ["bmp", "gif", "png", "jpg", "jpeg", "doc", "docx", "xls", "xlsx", "htm", "html", "rar", "zip", "txt", "pdf"];
    function CheckExtension(file) {
        /*global document: false */
        var path = file.value;
        var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
        var isValidFile = false;
        for (var i = 0; i < validFilesTypes.length; i++) {
            if (ext == validFilesTypes[i]) {
                isValidFile = true;
                break;
            }
        }
        if (!isValidFile) {
            alert("Invalid File. Unknown Extension Of Tender Doc" + "Valid extensions are:\n\n" + validFilesTypes.join(", "));
        }
        return isValidFile;
    }

    function validateFileSize(file) {
        /*global document: false */
        //getting size of the file
        var fileSize = file.files[0].size;
        var isValidFile = false;
        if (fileSize !== 0 && fileSize <= 25214400) {
            isValidFile = true;
        }
        if (!isValidFile) {
            alert("File Size Should be Greater than 0 and less than 25 mb");
        }
        return isValidFile;
    }

and calling these method in FileUpload Control like that

<asp:FileUpload ID="fuTenderDoc" onchange="var result=CheckExtension(this);validateFileSize(this); return result"
                        runat="server"></asp:FileUpload>

<asp:FileUpload ID="fuBidDoc" onchange="var result=CheckExtension(this);validateFileSize(this); return result"
                        runat="server"></asp:FileUpload>

 <asp:FileUpload ID="fuTechnicalDoc" onchange="var result=CheckExtension(this);validateFileSize(this); return result"
                        runat="server"></asp:FileUpload>