W3cubDocs

File: webkitRelativePath property

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

html

<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<output id="output"></output>

JavaScript

const output = document.getElementById("output");
const filepicker = document.getElementById("filepicker");

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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`webkitRelativePath`	13	13	50	No	15	11.1	≤37	18	50	14	11.3	1.0