Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


Custom User Controls

Is there a control to select a Folder? by adam0101
Posted: 11 Jun 04 (Edited 2 Feb 06)

As of the writing of this FAQ, there is no built in control in any mainstream browsers that would allow a user to easily select a folder. The closest thing there is would be <input type="file">, but that only allows you to select a single file in a folder, not the folder itself. The only other thing you can do is to create a control that the user will have to approve of before they can use it. Here is one example:

Code to call the folder dialog box


<script language="JavaScript">
function getFolder(){
  return showModalDialog("folderDialog.html","","width:400px;height:400px;resizeable:yes;");
<input type="text" name="yourFieldName"><input type="button" value="Browse..." onclick="this.form.yourFieldName.value=getFolder()">

Contents of folderDialog.html


  <title>Browse Folders</title>
var currentFolder="";
function GetDriveList(){
  var fso, obj, n, e, item, arr=[];
try {
  fso = new ActiveXObject("Scripting.FileSystemObject");
catch(er) {
  alert('Could not load Drives. The ActiveX control could not be started.');

  e = new Enumerator(fso.Drives);
    item = e.item();
    obj = {letter:"",description:""};
    obj.letter = item.DriveLetter;
    if (item.DriveType == 3) obj.description = item.ShareName;
    else if (item.IsReady) obj.description = item.VolumeName;
    else obj.description = "[Drive not ready]";
function GetSubFolderList(fld){
  var e, arr=[];
  var fso = new ActiveXObject("Scripting.FileSystemObject");
  var f = fso.GetFolder(fld.toString());
  var e = new Enumerator(f.SubFolders);
function loadDrives(){
  var drives=GetDriveList(),list="";
  for(var i=0;i<drives.length;i++){
    list+="<div onclick=\"loadList('"+drives[i].letter+':\\\\\')" class="folders" onmouseover="highlight(this)" onmouseout="unhighlight(this)">'+drives[i].letter+':\\ - '+ drives[i].description+'</div>';
  document.getElementById("path").innerHTML='<a href="" onclick="loadDrives();return false" title="My Computer">My Computer</a>\\';
function loadList(fld){
  var path="",list="",paths=fld.split("\\");
  var divPath=document.getElementById("path");
  var divList=document.getElementById("list");
  for(var i=0;i<paths.length-1;i++){
      path+=paths[i]+' \\';
      path+="<a href=\"\" onclick=\"loadList('";
      for(var j=0;j<i+1;j++){
      path+='\');return false">'+paths[i]+'</a> \\ ';
  divPath.innerHTML='<a href="" onclick="loadDrives();return false">My Computer</a> \\ '+path;
  divPath.title="My Computer\\"+paths.toString().replace(/,/g,"\\");

  var subfolders=GetSubFolderList(fld);
  for(var j=0;j<subfolders.length;j++){
    list+="<div onclick=\"loadList('"+(fld+subfolders[j]).replace(/\\/g,"\\\\")+'\\\\\')" onmouseover="highlight(this)" onmouseout="unhighlight(this)" title="'+subfolders[j]+'" class="folders">'+subfolders[j]+"</div>";
function resizeList(){
  var divList=document.getElementById("list");
  var divPath=document.getElementById("path");
  if(document.body.clientHeight>0 && divPath.offsetHeight>0){
function highlight(div){
function unhighlight(div){
function selectFolder(){
function cancelFolder(){
  background-color: #CCCCCC;
  border-bottom: solid 1px black;
  font-size: 8pt;
  font-family: Arial;
  font-weight: bold;
  padding: 2px;
  font-size: 10pt;
  font-family: Arial;
  padding: 1px;
  border-top: solid 1px white;
  border-left: solid 1px white;
  border-right: solid 1px white;
  border-bottom: solid 1px black;
  cursor: hand;
  pointer: hand;
  background-color: white;
  padding: 0px;
  border-style: outset;
  border-width: 2px;
  cursor: hand;
  pointer: hand;
  background-color: #CCCCCC;
  background-color: #CCCCCC;
  border-style: outset;
  border-width: 2px;
<body onload="loadDrives()" onresize="resizeList()" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" scroll=no>
<div id="container">
  <table border="0" cellpadding="0" cellspacing="0" id="header">
      <td><div id="path"></div></td>
      <td align="right" width="1%" nowrap>
        <input type="button" value="Select" onclick="selectFolder()"><input type="button" value="Cancel" onclick="cancelFolder()">
  <div id="list">You must allow the ActiveX control to run in order to use this dialog.</div>


Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close