Return folder name with Chrome's webkitdirectory

danielnz · 03-06-2013, 10:06 PM

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>

xelawho · 03-06-2013, 11:01 PM

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;
	}
}

danielnz · 03-06-2013, 11:31 PM

BOOM... after almost 2 full days trying to figure this out, the answer was so simple.

Thanks for your SUPER HELPFUL answer!

xelawho · 03-07-2013, 12:09 AM

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)
}