[whatwg] Forms: <input type=file> and directory tree picking
jwatt at jwatt.org
Fri Aug 2 09:15:29 PDT 2013
I'm working on Mozilla's implementation of <input type=file> to allow the user
to pick a directory. The idea would be that the files in that directory and its
subdirectories would be added to the HTMLInputElement.files FileList. A brief
summary of the behavior I'm currently working towards is described below.
For now we just plan on requiring the 'multiple' attribute to allow directory
picking, and do _not_ plan to add a 'directory' attribute. Instead we want to
see whether we can get away with allowing the user (not the content author) to
decide whether they want to pick a directory or to pick individual files from a
directory (perhaps by having two buttons in the UI, "Choose file(s)" and "Choose
directory", since platforms generally have different pickers for the two tasks).
The advantage of avoiding the need for the 'directory' attribute would be that
directory picking would work for existing content with <input type=file
multiple> without needing to be changed. One disadvantage would be that existing
content may depend on the file names in the FileList being unique. If that turns
out to be a significant problem in practice, we may have to implement the
We would change the File interface to add a 'path' property, which would be the
path (without the file name) of the file relative to the directory that was picked.
Currently authors can use HTMLInputElement.click() to open a system file picker.
To give content the ability to open a system directory picker we'd add a
corresponding .openDirectoryPicker() function.
In my prototype implementation it took around 30 seconds to build the FileList
for a directory of 200,000 files with a top end SSD; so depending on what the
page is doing, directory picking could take some time. To allow content authors
with styled <input> to provide feedback to users during scans of large directory
trees we plan to have openDirectoryPicker return a ProgressPromise:
We'd then fire progress events at the promise specifying how many files had been
processed so far.
More information about the whatwg