Thewebkitdirectory property of theHTMLInputElement interface reflects thewebkitdirectory HTML attribute, which indicates that<input type="file"> elements can only select directories instead of files.

When a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected items.The selected file system entries can be obtained using thewebkitEntries property.

Value

A Boolean;true if the<input> element should allow picking only directories orfalse if only files should be selectable.

Description

Settingwebkitdirectory totrue causes the input element to offer directories for the user to select instead of files.After the user chooses a directory, eachFile object in the returnedfiles has itsFile.webkitRelativePath property set to a path relative to the selected ancestor directory.For example, consider this file system:

PhotoAlbums├── Birthdays│   ├── Jamie's 1st birthday│   │   ├── PIC1000.jpg│   │   └── PIC1044.jpg│   └── Don's 40th birthday│       ├── PIC2343.jpg│       └── PIC2356.jpg└── Vacations    └── Mars        ├── PIC5556.jpg        ├── PIC5684.jpg        └── PIC5712.jpg

If the user chooses thePhotoAlbums directory, the list reported by files will containFile objects for every file.The entry forPIC2343.jpg will have awebkitRelativePath ofPhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg.This makes it possible to determine the selected directory's hierarchy even though theFileList is flat.

Examples

In this example, a directory picker is presented which lets the user choose one or more directories.When thechange event occurs, a list of all files contained within the selected directory hierarchies is created and displayed.

HTML

<input type="file" name="fileList" webkitdirectory multiple /><ul></ul>

JavaScript

document.getElementById("file-picker").addEventListener("change", (event) => {  let output = document.getElementById("listing");  for (const file of event.target.files) {    let item = document.createElement("li");    item.textContent = file.webkitRelativePath;    output.appendChild(item);  }});

Result

Specifications

Browser compatibility

See also

• File and Directory Entries API
• HTMLInputElement.webkitEntries
• File.webkitRelativePath