GUI way to select file or folder

Stunnix Web Server supports advanced facility to let user choose single file or folder using native GUI on Windows and MacOS X platforms; on other platforms user has to type in path to file or folder into html text input field. It's used in Stunnix CDBuilder interface for selection of all file and directory paths.

On Windows and MacOS X, the path to file or folder user selected is inserted into html text input field. User clicks a button and (on Windows and MacOSX) a dialog is popped up; if user makes a selection, a text input field gets set to the path user selected; if user cancels dialog, text input field is not changed. If JavaScript scripting is not available (or if using Linux), user has to type the path to file or folder manually.

This works on all browsers. User has to insert a statement that will load appropriate javascript code into page that needs filechooser enabled.

It's possible to request getting paths relative to some other directory, but not limiting user to that directory (i.e. objects outside that directory can also be selected by the user).

Demo is included on the trial CD - at location /fileseltest.shtml.

Detailed description

To enable this facility, user has to put the following code into page inside BODY tag (not inside HEAD tag):

<script language=javascript 
src=/stunnix-websrv-utils/browse-files/select-file-or-folder.js>
</script>

To insert a button that calls the facility, add the following fragment at place where you wish it to appear:

<script language=javascript>
<!--
    fsb_add_file_browser(document.getElementById('t2n'), '');
-->
</script>

Where 't2n' is the ID of html input field that contains current value for selection (and where user selection will be written to). No button will be inserted on unsupported platforms (currently Linux is the only unsupported platform). This call will let user browse for file. To let user browse for directory, replace function fsb_add_file_browser with fsb_add_dir_browser.

The 2nd argument to the function is the path relative to which to try to return path user selected. So if you pass "/A/B/" as 2nd argument, the function will return "C/D" if user selects file/dir with absolute path "/A/B/C/D". If user selects "/X/Y/Z" (i.e. any path outside of "/A/B") "/X/Y/Z" will be returned.

To customize the button inserted by fsb_add_*_browser alter the values of javascript variables:

  • fsbrowser_button_title - for changing the title of button inserted
  • fsbrowser_button_class - for changing the class attribute of button inserted
  • _fsb_os_supported - set to 0 to disable it irregarding of the platform - no button will be added by these functions, so user will have to type path manually

How it works

A special CGI script and several native code executables are used for implementing this facility.