File: webkitRelativePath property
Baseline 2025 Newly available
Since August 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Note: This feature is available in Web Workers.
The webkitRelativePath read-only property of the File interface contains a string which specifies the file's path relative to the directory selected by the user in an <input> element with its webkitdirectory attribute set.
Value
A string containing the path of the file relative to the ancestor directory the user selected.
Example
In this example, a directory picker is presented which lets the user choose one or more directories. When the change event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed.
HTML
html
<input type="file" id="file-picker" name="fileList" webkitdirectory multiple /> <output id="output"></output> JavaScript
js
const output = document.getElementById("output"); const filePicker = document.getElementById("file-picker"); filePicker.addEventListener("change", (event) => { const files = event.target.files; for (const file of files) { output.textContent += `${file.webkitRelativePath}\n`; } }); Result
Specifications
| Specification |
|---|
| File and Directory Entries API # dom-file-webkitrelativepath |