What is the purpose of webkitRelativePath property in File object?

html dom webkit console fileapi
jayarjo picture jayarjo · Dec 4, 2011 · Viewed 21.3k times · Source

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

ebidel picture ebidel · Dec 5, 2011

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.

Related questions

How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More
How to make JavaScript execute after page load?

I'm executing an external script, using a <script> inside <head>. Now since the script executes before the page has loaded, I can't access the <body>, among other things. I'd like to execute some JavaScript …

Read More
How can I select an element by name with jQuery?

Have a table column I'm trying to expand and hide: jQuery seems to hide the td elements when I select it by class but not by element's name. For example, why does: $(".bold").hide(); // selecting by class works $("tcol1").hide(); // …

Read More