[whatwg] Forms: <input type=file> and directory tree picking

[Jonathan Watt]

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 
'directory' attribute.

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:

    https://github.com/slightlyoff/Promises/blob/master/ProgressFuture.idl

We'd then fire progress events at the promise specifying how many files had been 
processed so far.

Thoughts? Questions?