Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The File.webkitRelativePath
is a read-only property that contains a USVString
which specifies the file's path relative to the directory selected by the user in an <input>
element with its webkitdirectory
attribute set.
A USVString
containing the path of the file relative to the ancestor directory the user selected.
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.
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>
document.getElementById("filepicker").addEventListener("change", function(event) {
let output = document.getElementById("listing");
let files = event.target.files;
for (let i=0; i<files.length; i++) {
let item = document.createElement("li");
item.innerHTML = files[i].webkitRelativePath;
output.appendChild(item);
};
}, false);
This API has no official W3C or WHATWG specification.