File.webkitRelativePath
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.
Value
A USVString
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 content
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>
JavaScript content
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);
Result
Specifications
Specification |
---|
File and Directory Entries API # dom-file-webkitrelativepath |
This API has no official W3C or WHATWG specification.
Browser compatibility
BCD tables only load in the browser