Validating Uploaded File Extensions Using Javascript

If you have a file upload in a form it is helpful to limit what formats you want to allow users to upload. This tutorial will show you how to do this using javascript. Please note that client side validation is useful, but can be easily bypassed. For safest results use both client and server side validation.

For this example we will create a function called checkExtension(). This function will check the extension of the file to ensure that it is a format that you want to allow. If it is an allowed format it will do nothing and if it isn’t it will alert the user then clear the file upload input. The allowedExtensions variable is where you will put a list of the extensions that you want to allow.

var allowedExtensions = {
  '.zip'  : 1,
  '.rar' :1
};

function checkExtension(filename) 
{
    var match = /\..+$/;
    var ext = filename.match(match);
    if (allowedExtensions[ext]) 
    {
    return true;
    } 
    else 
    {
    alert("File must be .zip or .rar!");
    //will clear the file input box.
    location.reload();
    return false;
    }
}

This is all that is required from javascript to enable the validation. All you need to do is create the html form and add the onchange event handler to make it call this function.

<form>
     <input type="file" name="file" onchange="checkExtension(this.value);"/>
</form>

Remember to also include server side validation to ensure you are fully protected.

Related Articles

Related Questions

Confused About My New Laptop: Did I Buy a Used One?

So, I bought a new laptop with Windows 11 about a month ago, and when I set it up, I noticed it already had...

Is Arch Linux Right for Me or Should I Switch to Debian?

I recently set up Linux on my computer as a dual boot to learn more about it, especially for my studies in Cybersecurity. I'm...

Is upgrading from Ryzen 7 5700X to 7700X worth a 17% performance boost?

I'm considering upgrading my PC, specifically swapping out my Ryzen 7 5700X for a new Ryzen 7 7700X, as recommended by a friend. However,...

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Tools

Scavenger Hunt Team Randomizer

Planning a scavenger hunt and need to split participants into random teams? Whether you're organizing a school activity, a corporate team-building event, or a...

File Hash Generator Online – Get Instant MD5 and SHA-256 Hashes

Whether you are validating downloads, checking for corruption, or comparing files for duplicates, having a fast and secure way to generate file hashes is...

Visual CSS Editor for Modern Glass UI Effects

Modern UI design is all about clean, layered aesthetics, and few styles deliver this better than glassmorphism. If you're designing sleek user interfaces and...

Fast and Accurate Tap BPM Counter – Free Web Tool

Whether you're producing music, DJing live, or just figuring out the tempo of a song, knowing the BPM (beats per minute) can be critical....

Glassmorphism CSS Generator with Live Preview

Glassmorphism is one of the most visually striking design trends in modern UI. Its soft, frosted-glass effect adds depth and elegance to web interfaces,...

Add Custom Speech and Caption Boxes to Any Image Online

Creating comic-style images used to require complex design tools or specialist software. Whether you're making memes, teaching graphics, social media posts or lighthearted content,...

Latest Posts

Latest Questions