Menu
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?
622
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.
A relative path refers to a location that is relative to a current directory. Relative paths make use of two special symbols, a dot (.) and a double-dot (..), which translate into the current directory and the parent directory. Double dots are used for moving up in the hierarchy.
You can retrieve the saved file path in the uploader success event and assign it to custom attribute (data-file-name) value of the respective file list element to open the uploaded file. Click the respective file element to create a new request along with saved file path using http header.
HTML can be used to open a folder from our local storage. In order to open a folder from our local storage, use 'HREF' attribute of HTML. In the HREF attribute, we specify the path of our folder.
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.
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
