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.
A string containing the path of the file relative to the ancestor directory the user selected.
ExampleIn 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.
<input type="file" id="file-picker" name="fileList" webkitdirectory multiple />
<output id="output"></output>
output {
display: block;
white-space: pre-wrap;
}
JavaScript
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 Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4