How do I use Google Chrome 11's Upload Folder

Question

Google Chrome 11 now supports uploading folders. Currently this feature is only implemented in Google Docs, and I have been unable to find any API documentation on how to use this in my code.

From what I can see, you click the Upload folder link in Google Docs, which displays the "Browse For Folder" dialog (a call to SHBrowseForFolder by the looks of it), you select a folder, and then the contents of that folder is uploaded to Google Docs.

As this feature requires upgrading Google Chrome to the latest version, or for other browsers running a Java Applet, I assume I can use this feature in my own websites?

I would love to have this feature in a Content Management System I maintain!

Answer 1

You should be able to see a demo here: http://html5-demos.appspot.com/static/html5storage/demos/upload_directory/index.html

Basically it works by setting up an attribute "webkitdirectory" on a file input element.

<input type="file" id="file_input" webkitdirectory="" directory="">

Then when the user has selected a folder, it itterates across the "e.target.files" object to get a list of files included in the selection (this enables you to have access to those files from the clientside).

Drag and drop is similar, when you listen to the "ondrop" event on a "draggable" element, if a a directory or selection of files is dropped on to the element, the "files" property on the event will be a list of files contained in the operation.