Inside Technique : Client-side Data Access : Selecting a Client-side data file

In order to keep the Sokoban game open-ended, we decided not to hard-code the puzzle levels into the game. We chose a DOOM-like implementation, where the game levels are stored in an external data file, and the user has the option to design and add more levels by creating new data files. It follows then that one of the first decisions we were faced with was - designing the interface by which the user could select a game file locally.

At first glance this appears ridiculously simple, just add a File Input like this:

<INPUT ID='F1' type='file'>

But, seriously, have you looked at the File Input lately? It sits there, fat, gray and ugly on your carefully designed, color co-ordinated page. You could dabble in a bit of CSS and change it's appearance, but you'd rather not have a button anyway. And definitely not the textbox associated with it. A link with a cool hover rollover, maybe?

That's easy. First you hide the File Input by dumping it in some godforsaken area of your screen, like this:

<INPUT ID='F1' type='file' style='position:absolute;top:-200'>

Then you add your cool link, which calls the Click method of the File Input:

<A HREF='javascript:doFileOpen()'>Open File</A>
<SCRIPT LANGUAGE='JavaScript'>
function doFileOpen(){
F1.click();
alert(F1.value==""?"You did not choose a file":"You chose "+F1.value);
}
</SCRIPT>

See this script in action by clicking the link below.

Demonstration requires Internet Explorer 4.0 or later

Ok, so that solves the look problem, but you notice some usage problems here. The first is that the Open File dialog pops up in a random directory, not necessarily the directory from which the user started the game, where the game data files are stored. The next is that by default, the filter in this dialog is set to 'All files(*.*)', whereas you would prefer that filter to be 'Level Data files(*.lvl)' , which happens to be the default extension of your data files. This basic fuctionality would be expected of even the simplest of executable programs. If you're doing cross-browser/OS work, I'm afraid you're stuck with these problems. If, however, you are developing on IE/Windows, you have an option. It's called the Common Dialog Control.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.