#javascript #validation #security

Client-side validation before uploading an excel file

Validation is one of the major parts of web development. But sometimes it can be a ball buster especially when it comes to validating file uploads.

Below is a simple piece of code through which we can validate the file type before upload. You may or may not need a server-side validation after that. It’s totally up to you and your system.

Here is the code.

Html :

<input type="file" id="file" onchange="checkfile(this);" name="file" required>

JavaScript:

<script>
    function checkfile(sender) {
        var validExts = [".xlsx", ".xls"];
        var fileExt = sender.value;
        fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
        if (validExts.indexOf(fileExt) < 0) {
            alert("Invalid file selected, valid files are of " +
                validExts.toString() + " types.");
            document.getElementById("form-id").reset();
            return false;
        } else return true;
    }
</script>

The above code can be extended for any file. Just replace your desired file extensions in the “validExts” array and you are good to go.

mohammed-samgan-khan

Hi, I am Samgan, I excel at solving complex problems involving logic and step by step breakdown of the problem. Besides, to develop complex algorithms, I specialise in problem framing, systems design, and product development strategy. Sometimes I also enjoy public speaking.  

I am also the creator of penit.ink, a site which provides young writers with a free hand place to show their creation to the world. Irrespective of the niche, if you write this place is defiantly for you.