An Open File Dialog in JavaScript

• Download demo project - 2 Kb

Introduction

Did you ever have the need to being flexible in the data you have to process by a JavaScript element? Here's the way I solved it. My problem was that I needed a JavaScript to present the contents of a specific type of XML-file in a human readable way and that this data can reside in different files, so the name is variable. (For those interested, it was about the presentation of GPS data, held in a specific XML variant called "gpx".) I wanted to handle all these files with a single JavaScript element, without needing to edit the source for every new file. Off course you can prompt the user to enter the file name, but this can become rather awkward, for instance when it sits in a far off folder. What I really needed was the normal open file dialog, but since I don't know of a way to reach that from within JavaScript I tried to build one myself. Luckily I stumbled over the article by <a href="http://www.codeproject.com/jscript/search_in_files.asp">AFShin Dehghani on finding files in a directory. I expanded his ideas into my solution.

Background

The solution is based on two things. First there is the use of the ActiveX object FileSystemObject which contains methods for making lists of files and subfolders within a certain folder. Secondly there's the possibility of parameter passing into a JavaScript using the DOM element location.href which gives you the original URL-reference by which it was invoked.

Please note that you have to allow for ActiveX in Internet Explorer for this code to be executed. In Mozilla, you need to have a special plug-in.

Using the code

Lets have a look at the code in OpenDialog.htm first. Every time you hit the "Show contents" button, the function Scan is invoked to produce a list of subfolders and files in the folder that is contained in the input-field path.

The function FindFolder builds the list of subfolders. (Sorry that I can't show the source in here, but the browser messes it all up even when contained in <pre> tags; you'll have to revert to the demo.) It creates a line for every subfolder, in which the folder name is contained in an HTML input field that is given a specific onClick behaviour: when clicked, the folder name is concatenated to the path field. Note the amount of backslashes needed to obtain a single backslash as path separator in the output.

The function FindFile builds the list of files. I used to have a filter in here using the name extension, but in the demo this has been commented out. It now creates a list of files where every file name is contained in a specific <a> element, giving the URL of the destination JavaScript element (called "Destination.htm" in the demo). The file name resides within the "href" attribute separated from the destination file by a question mark. This makes it a parameter passed into the destination Javascript, when you click the file name hyperlink shown in the browser.

In Destination.htm the following snippet is essential:

function showFileName() {
   var e = document.getElementById("fileInfo");
   var UrlParameter = location.href.split("?");
   var StrOut = new String();
   var fileName = new String();
   if (UrlParameter[1]) {
      fileName = UrlParameter[1];

It shows the creation of an array called UrlParameter, being filled with the complete contents of the URL (as shown in the address bar in Internet Explorer). This contents is split by the question mark character and divided over the subsequent array elements. The name of the selected file is directly behind the question mark, so it ends up in the second array element, from where it can be used. In this example it's only shown in the browser, but it can't be too hard to think of other uses. In my application, the XML-data was loaded from the file and interpreted to be shown in the browser.

Points of Interest

I had some trouble getting in the backslash character as separator in the path variable, since this acts as escape character in JavaScript, telling the interpreter that the subsequent character has to be taken literally and not having a special function. So in order to output one backslash you'd have to enter two: the first one telling the interpreter that the second one has to be output. When I tried this, nothing appeared. This puzzled me for a while, until I realized that the output itself is a small piece of script: the action that has to be taken on the onClick event. So that output again has to contain two slashes in order to produce one in the variable. Hence you need to put four of them in the statement that generates this all. (In my source you even see five, because of the subsequent quote that has to be in the output too.)

History

• This is the first version, dated August 24, 2004.