validation on client side javascript

Question

Im working on simple project using asp.net and I have created a form in which the user could upload a file. before storing the data on client side I made workaround to check file extension and stop postback if the file not image

 function checkFileExtention() { var file = document.getElementById('FileUpload1').value; var lastIndex = file.lastIndexOf("."); var fileExt = file.substr(lastIndex + 1).toLowerCase(); var isValidExtention=0; var i; var extArray = ["jpg", "png", "gif", "jpeg"]; for (i = 0; i < extArray.Length; i++) { if (fileExt == extArray[i]) { isValidExtention = 1; return true; break; } else { document.getElementById("demo").innerText = "invalid"; return false; isValidExtention = 0; } } } 

 <asp:LinkButton ID="addButton" runat="server" type="submit" CausesValidation="true" OnClick="addButton_Click" OnClientClick="if (!checkFileExtention()) {return false;}">Add</asp:LinkButton> 

but i faced some issues where I can't show alert or set text inside for loop even value of variable isValidExtention always 0 outside the loop

any help would be appreciated

Answer 1

You can try this,

function checkFileExtention() {
       var file = document.getElementById('FileUpload1').value;
        if (file != "") {
            var fileExt  = file.match(/\.([^\.]+)$/)[1];
             var isValidExtention=0;
            var i;
            var extArray = ["jpg", "png", "gif", "jpeg"];

        for (i = 0; i < extArray.Length; i++) {

            if (fileExt.toLowerCase() == extArray[i]) {

                isValidExtention = 1;
                document.getElementById("demo").innerText = "";                   
                break;
            }
            else {
                document.getElementById("demo").innerText = "invalid";
                isValidExtention = 0;                   

            }
    }
});

Second way to check file extension,

function checkFileExtention() {
       var file = document.getElementById('FileUpload1').value;
        if (file != "") {
            var ext = file.match(/\.([^\.]+)$/)[1];
            var isValidExtention=0;
            ext.toLowerCase();
            if (ext == "png" || ext == "jpg" || ext == "jpeg" || ext=="gif") {
                isValidExtention = 1;
                    return true;                   
            }
            else {
               document.getElementById("demo").innerText = "invalid";
               isValidExtention = 0;
               return false;

            }
        }
    });

Answer 2

only problem in you code is little mistake like you are using "Length" instead of length. I modified your code please take a look.

function checkFileExtention() {
        var file = document.getElementById('FileUpload1').value;
        var lastIndex = file.lastIndexOf(".");
        var fileExt = file.substr(lastIndex + 1).toLowerCase();

        var isValidExtention = false;
        var i;
        var extArray = ["jpg", "png", "gif", "jpeg"];
        for (i = 0; i < extArray.length; i++) {
            if (fileExt == extArray[i]) {
                isValidExtention = true;
                document.getElementById("demo").innerText = "";
                break;
            }
            else {
                document.getElementById("demo").innerText = "invalid";
            }
        }
        return isValidExtention;
    }

Answer 3

Kindly check the below code. we restrict before upload file file is image or not..

   var oFileIn = document.getElementById('fileupload');        
    if (oFileIn.addEventListener) {
        oFileIn.addEventListener('change', filePicked, false);
    }

    function filePicked(event) {
    var files = event.target.files;
    var regex = new RegExp("(.*?)\.(png|gif|jpg|jpeg)$");
    if (!(regex.test(files[0].name)))
    {
        alert('Please select image files');
        var oFileIn = document.getElementById('fileupload');
        oFileIn.value='';
        return;
    }

    }

I hope its helpful to you.

Thanks and regards Angappan.S

Answer 4

Try this out:

const regex = /.+\.(jpg|jpeg|gif|png)\s*$/mig;
const str = `image.jpg
image.notmatching
capitalLetterFormat.PNG
.jpg
`;

it checks the following:

1. the image format matches your format
2. ignores possible spaces added at the end of your image
3. formats the name of your image is not empty.
4. the format is not case sensitive