Question

If you printout File object in Chrome console with something simple like this:

<input type="file" onchange="console.info(this.files);" />

you will see among other properties an always empty webkitRelativePath property:

fileName: "07.png"
fileSize: 33022
lastModifiedDate: Date
name: "07.png"
size: 33022
type: "image/png"
webkitRelativePath: ""
__proto__: File

What is it’s purpose? And how it can be leveraged?

Answer 1

It’s populated when using the webkitdirectory attribute on the file input:

<input type="file" webkitdirectory>

It only works in Chrome. This allows a user to select a folder rather than files, and every file is read recursively. The webkitRelativePath contains the relative path of the file within the hierarchy.

There’s a demo here.