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.
Syntax
relativePath = File
.webkitRelativePath
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 | Status | Comment |
---|---|---|
File and Directory Entries API The definition of 'webkitRelativePath' in that specification. |
Editor's Draft | Initial specification. |
This API has no official W3C or WHATWG specification.
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 13 webkit | 49 (49) | No support | No support | No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | No support | 0.16 webkit | 49.0 (49) | No support | No support | No support |