HTML file inputs support picking directories
<input type="file"> accepts a single file. You can allow multiple files via
<input type="file" multiple>.
But sometimes, selecting multiple files is not enough and can be cumbersome for the user. Enter
<input type="file" webkitdirectory multiple>
webkitdirectory switches the browser's file picker to select a directory. All files inside that directory, and inside any nested subdirectories, will be selected for the file input.
This can be useful when users want to upload all files from a nested directory structure. Note that users could also add lots of files if they selected a root directory or similar.
webkitdirectory to your file input and you are good to go. Your event handler needs to handle
event.target.files just like for a
Note that file entries will have a
webkitRelativePath property which lists the relative file path, starting from the selected directory (including it).
Note that Chrome will show a confirmation prompt to make users aware that they selected a directory. Firefox and Edge won't.
Although the property is called
webkitdirectory and not
directory, it is supported by Chrome, Firefox, Edge 14+, and Safari 11.1+.
Older browsers support
multiple, so you should offer that as a fallback.
I've seen examples using
directory but there are no indications this attribute will become standard soon. Feel free to use
<input type="file" multiple webkitdirectory directory> to feel future-proof.
webkitRelativePath is supported similarly to
webkitdirectory in HTML. As a fallback for older browsers you can use
name (which won't include any path).