Subscribe to
the Possibilities Ezine

Subscription Terms of Service
Privacy Policy

RSS feed links

Blog Article Categories

Automation

CGI

Content Protection

CSS

Debugging

HTML

JavaScript

Perl

PHP

Recommendations

Related Sites

Statistics

Web Development

Web Site Maintenance

Misc

Catching Illegal File Extension *Before* It's Uploaded

By Will Bontrager

You have a form that lets people upload a file. The files you want to accept are only certain types — with extensions ".gif" or ".jpg", for example.

Browsers, at least some browsers, let the user upload what they please.

Master Form V4 can check that what was uploaded is acceptable. But not all scripts can do that.

It would be nice to have something that checks the file name extension right at the form, before the file is uploaded.

That's what this blog post is about, a way to do that.

Your form needs two things, a name and an onsubmit attribute. The name might be name="MyForm" for example. The onsubmit attribute must be exactly this:

onsubmit="return ExtensionsOkay();"

Here is an example form:

<form method="POST" name="MyForm" action="/cgi-bin/form/MasterFormV4.cgi" enctype="multipart/form-data" onsubmit="return ExtensionsOkay();"> <input type="hidden" name="redirect" value="/thankyou.php"> <input type="hidden" name="uploadedfilesaveinfo" value="uploadinfo.htm"> Image to upload: <input type="file" name="FieldName" size="33" accept="image/*" maxlength="256"> <input type="submit" value="Upload my image"> </form>

And here is the JavaScript:

<script type="text/javascript" language="JavaScript"><!-- function ExtensionsOkay() { var extension = new Array(); // Step 1 of 2: // Replace MyForm with the name of your form and // replace FieldName with the upload field name. var fieldvalue = document.MyForm.FieldName.value; // Step 2 of 2: // Add the file name extensions that are okay (with // the period), for the variables with their numbers // in sequential order, as many or as few as needed, // starting with 0. (These are case sensitive.) extension[0] = ".png"; extension[1] = ".gif"; extension[2] = ".jpg"; extension[3] = ".jpeg"; extension[4] = ".ico"; extension[5] = ".cur"; // No other customization needed. var thisext = fieldvalue.substr(fieldvalue.lastIndexOf('.')); for(var i = 0; i < extension.length; i++) { if(thisext == extension[i]) { return true; } } alert("Your upload form contains an unapproved file name."); return false; } //--></script>

Two parts of the JavaScript need to be customized. The directions are in the JavaScript itself.

Put the JavaScript in the HEAD or BODY area of your web page, above or below the form. It's location doesn't matter so long as it doesn't interfere with other elements of the page.

August 23, 2006

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

© 1998-2001 William and Mari Bontrager
© 2001-2008 Bontrager Connection, LLC