Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    19
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Return folder name with Chrome's webkitdirectory

    Using Chrome's webkitdirectory property it's possible to open a folder browser dialog box and select a folder. My code below lists the contents of the selected folder, however, subfolders are returned as dots and all recursive files just return as part of a list. What I want to do is get a list of files including their path (as is possible when dragging & dropping using e.dataTransfer.items).

    I know this is possible because Google Drive does it as well as another uploading website I have seen. I can't seem to find anything on the web to answer this question.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head></head>
    
    <body>
    
    <form>
    <input type="file" value="Browser Folder" onChange="selectFolder(event)" webkitdirectory directory>
    </form>
    
    <script type="text/javascript">
    
    function selectFolder(e) {
    
    	var theFiles = e.target.files;
    	
    	for (var i=0, file; file=theFiles[i]; i++) {
    		document.write("<li>" + file.name);
    	}
    }
    
    </script>
    
    </body>
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,774
    Thanks
    55
    Thanked 518 Times in 515 Posts
    I see that you can get their relative path, but that's about as much as the object returns. Seems that you would be better off doing this with php or some other server-side option:

    Code:
    function selectFolder(e) {
    	var theFiles = e.target.files;
    	for (var i=0, file; file=theFiles[i]; i++) {
    	document.body.innerHTML+="<li>" + file.webkitRelativePath;
    	}
    }

  • Users who have thanked xelawho for this post:

    danielnz (03-06-2013)

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    19
    Thanks
    5
    Thanked 0 Times in 0 Posts
    BOOM... after almost 2 full days trying to figure this out, the answer was so simple.

    Thanks for your SUPER HELPFUL answer!

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,774
    Thanks
    55
    Thanked 518 Times in 515 Posts


    if you get stuck like that again, remember that you can inspect the event using Chrome's console - that will tell you all the information that it contains:

    Code:
    function selectFolder(e) {
    console.log(e)
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •