Javascript Error Check for File Uploads

If your uploading a file of any decent size it will only annoy the user if they upload something wrong and get told afterwards. What we’d like to do is scan that file and make sure it’s kosher before it’s even uploaded, but unfortunately that isn’t possible with Javascript due to built in security restrictions.

Really all we know about that file is it’s name before we receive it. The only thing we can do is check the file extension to see if it is aligned with our wishes. Included here is a very simple file upload form with minimal PHP and the proper Javascript to complete this check.

Here is the HTML/Javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Jpeg Upload</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" language="JavaScript"><!--
    function check_extension(id) {
      var filename = document.getElementById(id).value;
      var fileext = filename.substring(filename.lastIndexOf('.')+1).toLowerCase();
      var extension = new Array('jpg','jpeg');

       for(var i = 0; i < extension.length; i++) {
         if(fileext == extension[i]) { return true; }
       }
       alert("Your upload form contains an unapproved file name.");
       return false;
    }
  //--></script>
</head>

<body>

  <form enctype="multipart/form-data" method="post" action="index.php" onsubmit="return check_extension('image_file');">
    <label for="image_file">Jpeg Image to upload: <input type="file" name="image_file" id="image_file" /></label>
    <input type="submit" name="submit" value="upload" />
  </form>

<body>
<html>

It should be fairly straightforward. In the form remember to set the onsubmit=”return check_extension(‘image_file’);” where image_file is the name of your file input. You can modify extensions in the Javascript to your preferences.

For completeness here is a working example and the source.

TimberWolf 3D Source Code

TimberWolf 3d Model ImageSomething I programed for a school assignment. I’m including a full zip of what I have, although some of the files may be horribly outdated. I know the exe works fine on my computer. If I had it to do again I’d fix a lot of modeling issues. I learned a lot after I modeled it on how to cull polygons.

It is programmed using OpenGL. It was modeled in Lightwave. I don’t recall what program I used to convert it from Lightwave to code.

timberwolf-3d.zipTimberWolf Win32 Executable