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 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.
