webkitRelativePath folder levels

Question

Where can I find info regarding the max number of folder levels the webkitRelativePath property can have?

I have this:

<input type="file" multiple webkitdirectory id="fileURL" />

I add a file image.jpg inside folder6 c:\folder1\folder2\folder3\folder4\folder5\folder6\image.jpg but when I debug and set a breakpoint in my for loop when traversing all the files in folder6, the File.webkitRelativePath returns only the last two folders "folder5/folder6/image.jpg".

var files,
    file,
    extension,
    input = document.getElementById("fileURL"),
    output = document.getElementById("fileOutput"),
    holder = document.getElementById("fileHolder");

input.addEventListener("change", function (e) {
    files = e.target.files;
    output.innerHTML = "";

    for (var i = 0, len = files.length; i < len; i++) {
        file = files[i];
        extension = file.name.split(".").pop();
        output.innerHTML += "<li class='type-" + extension + "'>" + file.webkitRelativePath + " (" + Math.floor(file.size / 1024 * 100) / 100 + "KB)</li>";
    }
}, false);

Are you trying to retrieve the full path to the resource at the clients filesystem ? — guest271314, Feb 29 '16 at 20:02

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

It is not possible to retrieve the full path to the users filesystem using input type="file" elements.

You could package all the files into a single JSON file with a "header" document , e.g., JSON , describing folder structure to reassemble, parse as Blob or .just JSON
Try restructuring "root folder" into a single file containing data URI representation of multiple files; with a "header" containing description , for example, in JSON , of how to reassemble file structure; see, for example HTML5 Javascript how to create a gallery photo with all file in a folder
Include instructions in first file in existing folder; parse for first file , or specific file name on how to reassemble file structure of folder
Another option would be to substitute accept="application/zip" attribute for multiple , directory attributes; save folder as a .zip , which should retain folder structure when decompressed

See also Exploring the FileSystem APIs

edited May 23 '17 at 12:31

Community

1
1

answered Feb 29 '16 at 20:05

guest271314

1
15
104
177

How deep can you go? – PussInBoots Feb 29 '16 at 20:06
Why would you want full path to clients filesystem ? What is the purpose of retrieving the full path to user filesystem resources ? – guest271314 Feb 29 '16 at 20:12
I have a predefined folder structure I would like to reuse. – PussInBoots Feb 29 '16 at 20:12
You could package all the files into a single `JSON` file with a "header" document , e.g., `JSON` , describing folder structure to reassemble, parse as `Blob` or .just `JSON` – guest271314 Feb 29 '16 at 20:14
Hm I'm not really sure how that would work. I want to be able to drag and drop a root folder to the input control. – PussInBoots Feb 29 '16 at 20:16
@PussInBoots _"I want to be able to drag and drop a root folder to the input control"_ You could use `webkitRequestFileSystem` to preserve folder and file structure at user filesystem, see http://stackoverflow.com/questions/37106121/jquery-file-upload-plugin-is-possible-to-preserve-the-structure-of-uploaded-fol/37107246#37107246 . This is also possible using `` . Can post approach using `` to upload folders if this is requirement – guest271314 May 11 '16 at 13:36

webkitRelativePath folder levels

1 Answers1