File.webkitRelativePath

The File.webkitRelativePath is a read-only property that contains a DOMString 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 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 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

This API has no official W3C or WHATWG specification.

Browser compatibility

See also

• File and Directory Entries API
• HTMLInputElement.webkitEntries
• HTMLInputElement.webkitdirectory