Click here to Skip to main content
15,890,995 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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 as a parameter so that only in only one method i can validate all FileUpload my code of javacript is

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

Updated
after seeing this


i have changed my javascript to
JavaScript
var validFilesTypes = ["bmp", "gif", "png", "jpg", "jpeg", "doc", "docx", "xls", "xlsx", "htm", "html", "rar", "zip", "txt", "pdf"];
        function CheckExtension(Id) 
        {
            /*global document: false */
            var file = document.getElementById(Id);
            debugger;
            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;
        }

and calling it like this
ASP.NET
<asp:FileUpload ID="flTenderDoc" onchange="var result=CheckExtension('flTenderDoc');validateFileSize('flTenderDoc'); return result"
                            runat="server"></asp:FileUpload>

but it is not working ......
can anyone help this is my first javascript method :)
Posted
Updated 18-Dec-13 23:08pm
v3
Comments
Kriti Jain 19-Dec-13 4:39am    
you can pass "sender" and "args" as arguments to the javascript function CheckExtension(). From, args.Value you will get the filePath.

Solution

Always follow the second method. You have missed something. let me correct.
JavaScript
var validFilesTypes = ["bmp", "gif", "png", "jpg", "jpeg", "doc", "docx", "xls", "xlsx", "htm", "html", "rar", "zip", "txt", "pdf"];
function CheckExtension(file) {
    /*global document: false */
    //var file = document.getElementById(this.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(file) {
    /*global document: false */
    //var file = document.getElementById(this.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;
}

Mark that I have provided the arguments inside functions and commented out the line...
JavaScript
//var file = document.getElementById(this.ClientID);

Because you will now do everything on file which you received as argument.

Note

I have tested at my end, it is working fine.
 
Share this answer
 
Comments
Vishal Pand3y 19-Dec-13 5:34am    
i have tried this and on var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase(); line i am getting error Uncaught TypeError:can not call method 'lastIndexOf' of undefined
Vishal Pand3y 19-Dec-13 5:41am    
in file upload control do i have to change something
I encountered one error in IE and it is corrected by changing the below code...

var fileSize = file.files[0].size;

to

var fileSize = file.size;

So, change this and try again. Also tell me which browser you are using for testing and what type of file you are selecting?
Vishal Pand3y 19-Dec-13 5:52am    
by Changing this and using onchange="var result=CheckExtension(this);validateFileSize('this'); return result" it's working
but i can't understand why it wasn't working before that when i am selecting a file with extension .exe i haven't change anything in that method
and i am using chrome browser
No in chrome when I select the .exe file, it shows alerts me that "Invalid File. Unknown Extension Of Tender.....". So, it is working fine.
it is what i did for your solution rest of you can do by your self

JavaScript
<head runat="server">
    <title></title>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {



            var validFilesTypes = ["bmp", "gif", "png", "jpg", "jpeg", "doc", "docx", "xls", "xlsx", "htm", "html", "rar", "zip", "txt", "pdf"];
            $('.s').change(function () {
                CheckExtension(this);

                validateFileSize(this);

            });
            function CheckExtension(e) {
                /*global document: false */


                var file = e;
                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(e) {
                /*global document: false */
                var file = e;
                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;
            }
        });
    
    </script>
</head>




ASP.NET
<asp:fileupload id="txtTenderDoc" class="s" runat="server" xmlns:asp="#unknown"></asp:fileupload>
    <asp:fileupload id="FileUpload1" class="s" runat="server" xmlns:asp="#unknown"></asp:fileupload>
     <asp:fileupload id="FileUpload2" class="s" runat="server" xmlns:asp="#unknown"></asp:fileupload>
      <asp:fileupload id="FileUpload3" class="s" runat="server" xmlns:asp="#unknown"></asp:fileupload>
       <asp:fileupload id="FileUpload5" class="s" runat="server" xmlns:asp="#unknown"></asp:fileupload>
       <asp:fileupload id="FileUpload4" class="s" runat="server" xmlns:asp="#unknown"></asp:fileupload>
 
Share this answer
 
Comments
Vishal Pand3y 19-Dec-13 5:54am    
i have also tried this but it's not working and i am getting many compile time error....
[no name] 19-Dec-13 6:38am    
<asp:FileUpload ID="txtTenderDoc" class="s" runat="server">
instead of
<asp:fileupload id="txtTenderDoc" class="s" runat="server" xmlns:asp="#unknown">
Vishal Pand3y 19-Dec-13 6:40am    
ya i have but there is error near $('.s')
[no name] 20-Dec-13 4:28am    
can you please explain what u getting issue in my code in my side its working well enough.
Vishal Pand3y 20-Dec-13 4:39am    
i think problem is because of line <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
i don't have any j query so may be i am getting error

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900