File: webkitRelativePath property
The File.webkitRelativePath
is a read-only property that
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="filepicker" name="fileList" webkitdirectory multiple />
<output id="output"></output>
JavaScript
js
const output = document.getElementById("output");
const filepicker = document.getElementById("filepicker");
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 |
Browser compatibility
BCD tables only load in the browser