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

How do I keep NetBox updated when it’s always wrong?

I had a simple ticket today to set up a new port for a host. When I checked NetBox, it indicated that port 15...

Should I Focus on Programming or Design?

Hey everyone, I'm just starting out in the tech world and I'm torn between diving into programming or design. Can anyone give me a...

Are unprotected backend endpoints a common issue in web development?

I've recently started working at a major industrial company, and I'm shocked by how many internal web applications have unprotected backend endpoints. While some...

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