101

How can I create a directory chooser in html page.
If I use input file element I can select file only, but I need to select directory instead.
I need to do this beacause the user should select a right path inside his computer.
Any solutions ?

enfix
  • 6,680
  • 12
  • 55
  • 80
  • 2
    It's possible now with HTML5, at least in chrome: http://stackoverflow.com/questions/24718769/html5-javascript-how-to-get-the-selected-folder-name – mtyson Sep 30 '16 at 13:57
  • Please see this link: [enter link description here](https://stackoverflow.com/questions/43958335/select-folder-instead-of-single-file-input/43958426) – hhaseli Oct 18 '20 at 16:23

8 Answers8

91

Try this, I think it will work for you:

<input type="file" webkitdirectory directory multiple/>

You can find the demo of this at https://plus.google.com/+AddyOsmani/posts/Dk5UhZ6zfF3 , and if you need further information you can find it here.

shantanoo
  • 3,617
  • 1
  • 24
  • 37
Raveendra007
  • 1,060
  • 1
  • 8
  • 13
  • 16
    I have the impression that your suggestion works for uploading the folder, not getting its path. – Lazarus Rising Mar 11 '16 at 09:12
  • 1
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory for documentation. It is called `non-standard`. And it effectively uploads the files contained recursively (?), also exposing the folder name. This will do for most cases – phil294 Mar 04 '17 at 09:26
  • @SamithaChathuranga works in Chrome now, at least as of version 65 – xlm Nov 01 '18 at 02:46
39

Can't be done in pure HTML/JavaScript for security reasons.

Selecting a file for upload is the best you can do, and even then you won't get its full original path in modern browsers.

You may be able to put something together using Java or Flash (e.g. using SWFUpload as a basis), but it's a lot of work and brings additional compatibility issues.

Another thought would be opening an iframe showing the user's C: drive (or whatever) but even if that's possible nowadays (could be blocked for security reasons, haven't tried in a long time) it will be impossible for your web site to communicate with the iframe (again for security reasons).

What do you need this for?

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • 1
    I need it for select a path inside computer, not for upload. I use this path to save file, but with JSP function. – enfix May 11 '10 at 10:14
  • 2
    @enfix how are you going to save a file from a JSP server into a certain path on the user's local computer? I don't understand. Can you edit your question to clarify? – Pekka May 11 '10 at 10:15
  • 1
    I need to get the path where the user want save files, but the files are saved with java function callend inside JSP page. This function need a path where to save files. That's all. I save more than one file, i need to create folders and other things with this java function. – enfix May 11 '10 at 10:26
  • @enfix but why do you need the path from the *user's* computer for this when you are going to save files on the *server* ? – Pekka May 11 '10 at 10:30
  • No, I need to save in user's computer by java function. Sorry for my bad english... – enfix May 11 '10 at 10:35
  • @enfix no problem, but how are you going to do this? Are you using a Java applet in the user's browser already? – Pekka May 11 '10 at 10:36
  • No, not a java applet, I use a JSP page. Inside this I use an object with a method SaveResult(Selected_files, Path). Path is the parameter that I need to get from the HTML or JSP page. – enfix May 11 '10 at 10:53
  • 11
    @enfix you can't save a file on the client's computer from the server. It's totally impossible. You would have to serve the file as a regular file download, and the browser will then offer the user to choose the directory to save the file in. That is completely out of your control, though. You can't influence that part of the process. – Pekka May 11 '10 at 10:57
  • 3
    @Pekka웃 what does it matter what he needs it for – user3808307 Aug 15 '19 at 17:28
  • 3
    @user3808307 Because it can be helpful to figure out if it's an X-Y problem. – Clonkex Aug 05 '21 at 01:13
16

As of 2022 there is now a directory picker API:

https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker

async function getDir() {
  const dirHandle = await window.showDirectoryPicker();

  // run code for dirHandle
}
Light
  • 189
  • 1
  • 3
  • 1
    Should be accepted answer, however browser support as of 2023 is slim. Only 28% globally. And not in mobile devices. Give it a year or two. – Steven de Salas Apr 05 '23 at 16:42
7

This is my solution. It is the same as the above answers but you should notice that webkitdirectory = "true".

<input id="design" type="file" webkitdirectory = "true" directory/>
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Nang Le Duc
  • 119
  • 2
  • 3
3

In case if you are the server and the user (e.g. you are creating an app which works via browser and you need to choose a folder) then try to call JFileChooser from the server when some button is clicked in the browser

JFileChooser chooser = new JFileChooser();
chooser.setCurrentDirectory(new java.io.File("."));
chooser.setDialogTitle("select folder");
chooser.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);
chooser.setAcceptAllFileFilterUsed(false);

This code snipped is from here

Community
  • 1
  • 1
Levon
  • 10,408
  • 4
  • 47
  • 42
1

This isn't provided by HTML because of the security risk. <input type='file' /> is closest, but not what you are looking for.

If you're still using IE11 on Windows 10, you may try this example that uses an ActiveX control to achieve what you want.

Again if the OS is Windows, you can use VB scripts to access the core control files to browse for a folder.

Marco Faustinelli
  • 3,734
  • 5
  • 30
  • 49
KMån
  • 9,896
  • 2
  • 31
  • 41
1

I did a work around. I had a hidden textbox to hold the value. Then, on form_onsubmit, I copied the path value, less the file name to the hidden folder. Then, set the fileInput box to "". That way, no file is uploaded. I don't recall the event of the fileUpload control. Maybe onchange. It's been a while. If there's a value, I parse off the file name and put the folder back to the box. Of, course you'd validate that the file as a valid file. This would give you the clients workstation folder.
However, if you want to reflect server paths, that requires a whole different coding approach.

user8004777
  • 11
  • 1
  • The user would have to be trained to pick any file. It's hoaky. But, works in a pinch. Add and onchange="parseFilePath()" to the FileUpload control. function parseFileUploadPath() { var upl = document.getElementById("<%=this.FileUpload1.ClientID%>"); if (upl.value != "") { var pos = upl.value.lastIndexOf("\\") document.getElementById("<%=this.TextBox1.ClientID%>").value = upl.value.substr(0,pos) } } – user8004777 May 12 '17 at 20:03
  • Sorry, More complete HTML. – user8004777 May 12 '17 at 20:07
-5

If you do not have too many folders then I suggest you use if statements to choose an upload folder depending on the user input details. E.g.

String user= request.getParameter("username");
if (user=="Alfred"){
//Path A;
}
if (user=="other"){
//Path B;
}
ochola alfred
  • 1