Search code examples
htmldomwebkitconsolefileapi

What is the purpose of webkitRelativePath property in File object?

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?

Solution

  • 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.