Newly availableUseful in modern browsers, but confirm support before making it a core requirement.
Forms Newly available

<input type="file" webkitdirectory>

The <input type="file" webkitdirectory> HTML element shows a file picker from which users can choose a folder to upload with the form. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Forms

Overview

The <input type="file" webkitdirectory> HTML element shows a file picker from which users can choose a folder to upload with the form. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.File.webkitRelativePath
13
13
50
11.1
18
11.3
HTML attribute
webkitdirectory
Non-standard
7
13
50
11.1
132
18.4
DOM API
webkitdirectory

The webkitdirectory property of the HTMLInputElement interface reflects the webkitdirectory HTML attribute, which indicates that elements can only select directories instead of files.
7
13
50
11.1
132
18.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 4 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (132)
Implementation note
  • In Chrome for Android 131, choosing a directory crashes the browser (see bug 376834374).
  • Before version 131, users cannot choose a directory, only individual files (see bug 40248532.
Notes 1 item(s)
Implementation note
  • Before version 18.4, the attribute can be set but users cannot choose a directory, only individual files (see bug 271705).
Notes 5 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (132)
  • This feature was removed in a later browser version (131)
Implementation note
  • In Chrome for Android 131, if a user selects a directory, the browser crashes (see bug 376834374).
  • The property reflects the attribute, but users cannot choose a directory, only individual files (see bug 40248532.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18.4)
Implementation note
  • The property can be set, but has no effect (see bug 271705).

Syntax

JAVASCRIPT 
<label>Select a folder:
  <input type="file" webkitdirectory multiple>
</label>
<script>
input.addEventListener('change', (e) => {
  for (const file of e.target.files) {
    console.log(file.webkitRelativePath);
  }
});
</script>

Live demo

Directory picker

Select a folder and list the relative paths exposed by webkitRelativePath.

PreviewFullscreen

Extension summary

Count selected files by extension after the user picks a directory.

PreviewFullscreen

Selection tips

Explain what the browser will send when directory selection is enabled.

PreviewFullscreen

Use cases

  • Improve form input

    Use <input type="file" webkitdirectory> to make data entry more efficient, guided, or predictable inside real forms.

  • Reduce friction

    Apply <input type="file" webkitdirectory> when the browser can help users complete a task with fewer mistakes or less repetitive work.

Cautions

  • Test <input type="file" webkitdirectory> in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Keep labels, instructions, validation, and keyboard behavior clear so the enhancement helps rather than surprises users.

Related links

Powered by web-features