15

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?

jayarjo
  • 16,124
  • 24
  • 94
  • 138
  • I won't use it, cause it's webkit specific only. So, I recommend that you find its meaning, but don't use it (don't leverage it). – Saeed Neamati Dec 04 '11 at 08:30

1 Answers1

29

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.

arrowd
  • 33,231
  • 8
  • 79
  • 110
ebidel
  • 23,921
  • 3
  • 63
  • 76
  • Is there a video record to those slides somewhere? Some interesting stuff in there. – jayarjo Dec 06 '11 at 07:42
  • 5
    It's not true it works only in Chrome. It is also in FF. See Browser compatibility: https://developer.mozilla.org/en-US/docs/Web/API/File/webkitRelativePath – MatiK Feb 20 '17 at 14:08