CODEWITHSUNDEEP
htmldirectory
enfix
enfix

Reputation: 6970

Directory Chooser in HTML page

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 ?

Upvotes: 110

Views: 241515

Answers (8)

Kamran Khan
Kamran Khan

Reputation: 9986

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.

Upvotes: 1

Nang Le Duc
Nang Le Duc

Reputation: 204

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

Upvotes: 9

Light
Light

Reputation: 337

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
}

Upvotes: 20

ochola alfred
ochola alfred

Reputation: 1

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;
}

Upvotes: -6

Raveendra007
Raveendra007

Reputation: 1080

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.

Upvotes: 92

user8004777
user8004777

Reputation: 11

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.

Upvotes: 1

Levon
Levon

Reputation: 11924

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

Upvotes: 3

Pekka
Pekka

Reputation: 449395

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?

Upvotes: 40

Related Questions