Posted 3 months ago. Visible to the public. Repeats.

HTML file inputs support picking directories

HTML's <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 webkitdirectory:

Copy
<input type="file" webkitdirectory multiple>

Using 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.

Usage

Add webkitdirectory to your file input and you are good to go. Your event handler needs to handle event.target.files just like for a multiple input.

Note that file entries will have a webkitRelativePath property which lists the relative file path, starting from the selected directory (including it).

Example: http://jsfiddle.net/xozvprdj/

Note that Chrome will show a confirmation prompt to make users aware that they selected a directory. Firefox and Edge won't.

Browser support

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.

On JavaScript file objects, webkitRelativePath is supported similarly to webkitdirectory in HTML. As a fallback for older browsers you can use name (which won't include any path).

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Avatar
Arne Hartherz
Last edit:
3 months ago
by Besprechungs-PC
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more