File: webkitRelativePath property
Note: This feature is available inWeb Workers.
ThewebkitRelativePath read-only property of theFile interfacecontains a string which specifies the file's path relative to thedirectory selected by the user in an<input> element with itswebkitdirectory attribute set.
Value
A string containing the path of the file relative to the ancestordirectory the user selected.
Example
In this example, a directory picker is presented which lets the user choose one or moredirectories. When thechange event occurs, a list of all files containedwithin the selected directory hierarchies is generated and displayed.
HTML
html
<input type="file" name="fileList" webkitdirectory multiple /><output></output>output { display: block; white-space: pre-wrap;}JavaScript
js
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
| Specification |
|---|
| File and Directory Entries API # dom-file-webkitrelativepath |
Browser compatibility
Loading…