How to get the folder directory from the HTML input type "file" or in any other way?

Question

So, I have a basic form input of type "file" , however I want the user to be able to select the location of the folder, not the file.

How can I get this input to select a folder, not a file, or is there another way to do this?

Answer 1

I came across this page and then found out that this is only possible with javascript (without plugins like ActiveX or Flash), but only in chrome:

https://plus.google.com/+AddyOsmani/posts/Dk5UhZ6zfF3

Basically, they added support for the new attribute in the input element of the "webkitdirectory" file. You can use it as follows:

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

It allows you to select directories. The multiple attribute is a good rollback for browsers that support multiple file selection but not directory selection.

When you select a directory, files are accessible through the dom object for the control (document.getElementById ('ctrl')), just like with several attributes. Browsers recursively add all the files in the selected directory to this list.

You can already add a directory attribute if it will be standardized at some point (could not find information about it)

Answer 2

You are most likely looking at using the flash / silverlight / activeX control. The <input type="file" /> control does not handle this.

If you do not mind the user selecting a file as a means to get his directory, you can bind to this change control and then separate the part of the file name and save the path somewhere - but that’s how good it is.

Keep in mind that web pages are designed to communicate with servers. Nothing about providing a local directory to a remote server is “typical” (the server cannot access it, so why ask it?); however, files are a means of selectively transmitting information.

Answer 3

Although this is an old question, it may help someone.

We can select multiple files while viewing a file using "multiple"

 <input type="file" name="datafile" size="40" multiple>