Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

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

like image 228
Ben Avatar asked Oct 17 '12 20:10

Ben


People also ask

How do I select a file in a directory in HTML?

The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!

How does webkitdirectory work?

webkitdirectory is a property that reflects the webkitdirectory HTML attribute and indicates that the <input> element should let the user select directories instead of files. When a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected items.

How can I get full path of uploaded file in HTML using jquery?

var fullPath = $('#fileUpload1'). val();


1 Answers

Stumbled on this page as well, and then found out this is possible with just javascript (no plugins like ActiveX or Flash)

Basically, they added support for a new attribute on the file input element "webkitdirectory". You can use it like this:

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

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

When you select a directory the files are available through the dom object for the control (document.getElementById('ctrl')), just like they are with the multiple attribute. The browsers adds all files in the selected directory to that list recursively.

You can already add the directory attribute as well in case this gets standardized at some point (couldn't find any info regarding that)

like image 181
bwindels Avatar answered Sep 28 '22 23:09

bwindels