How do I use Google Chrome 11's Upload Folder feature in my own code?

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!

Boeotia

Is this part of the HTML5 specification that only Chrome has implemented? Or is it a Chrome-only figure? – Lechery

@Lechery Seems to be Chrome-only. At least I can't find anything relevant here: w3.org/TR/FileAPI – Nottinghamshire

+1 for particular Chrome version :) – Eveleen

@Lechery Chrome only it seems: #3590558 – Fogy

It seems WebKit only but works in Chrome and Yandex Browser Alpha too. – Ondrej

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.

Lobachevsky

Paul's exactly right. As a side note, you'll need to add an empty mozdirectory attribute as well if you'd like the functionality in Firefox. – Integrate

Does any documentation on this feature exist? Blog post mentioning it? Can't find anything on MDN/caniuse.com etc. What happens if you POST submit it, are all files uploaded and folders ignored? – Embouchure

This is awesome! Does anyone else have any resources that would be of assistance? – Nottinghamshire

I don't think Mike West is right. "mozdirectory" or "directory" doesn't seem to be supported by Firefox. – Sanderson

is there anyway to get Firefox to support this? – Clipper

should the name attribute be important here it should be something like name="files[]" to create an array of the files unless it's something silly I am overthinking. – Larainelarboard

is there any similar way to upload folder on server through IE? – Automatism

There is nothing like this in IE and Firefox currently. To check simply go to Dropbox and see if it's implemented there, if not, it likely means the feature is unavailable. – Trappist

IE (Edge) - msdn.microsoft.com/en-us/library/mt574730(v=vs.85).aspx, FF - unclear for any specific attribute (bugzilla.mozilla.org/show_bug.cgi?id=782233), but can do drag-n-drop for folders - #23423663 – Imprimatur

try "multiple" attribute for firefox – Exorcise

Does this preserve the folder structure? – Thenceforward

It does not preserve the folder structure, this uploads all the files recursively. How to preserve the directory structure? – Rolland

The link is broken! – Englut