How to get folder directory from HTML input type "file" or any other way?
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)
Related videos on Youtube
Ben
Updated on July 05, 2022Comments
-
Ben almost 2 years
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?
-
hjpotter92 over 11 yearsWhy would you chose to save the folder location?
-
Parag Meshram over 11 yearsAre you trying to upload all files in the selected folder?
-
Spudley over 11 yearsThe question is, what would you do with the folder once you got it? Would you want to upload all the files in the folder? Or do something else with to the folder? The browser would not ordinarily be able to do anything with the folder directly, so unless your plan it to upload the contents, there isn't much logic in wanting to specify the folder.
-
Ben over 11 yearsOk so basically I have PHP script which creates an Array of all image files that are located within a folder and I am wanting to create some kind of selection process for the user to select which folder the script needs to run on. The PHP script then creates an array of image files and displays all the images on one web page. Sounds like a bad idea now, but there is point to doing this.
-
Miscreant almost 5 yearsDirectory Upload proposal: wicg.github.io/directory-upload/proposal.html
-
-
Nikolay Melnikov over 9 yearsNote that this, however, blocks the possibility of selecting individual files. Up to date, the only way to select both files and directories using 'standard' ways (non-Flash, non-Silverlight, etc.) is by providing two separate input elements.
-
antonj about 9 years@NikolayMelnikov or by using drag and drop
-
Casper over 7 yearsHow can I make it accept multiple things including files and folders?
-
Xenos over 6 yearsI wouldn't rely on this because I see no such
directory
attribute in the live HTML spec html.spec.whatwg.org/multipage/input.html#the-input-element -
Raschid JFR over 4 yearsIt looks like it's supported by the major desktop browsers: caniuse.com/#feat=input-file-directory
-
madc over 4 yearsDoes not really relate to the question.
-
ashleedawg over 3 years@RaschidRafaelly - Looking at your linked page, support for 44% of users isn't great... and almost zero support on mobile. That said,
webkitdirectory
, although not on a standards track, currently has 92% support on desktop and mobile.