60

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!

Jonas
  • 121,568
  • 97
  • 310
  • 388
Peter
  • 2,654
  • 2
  • 33
  • 44

1 Answers1

80

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.

Kinlan
  • 16,315
  • 5
  • 56
  • 88
  • 17
    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. – Mike West May 01 '11 at 15:52
  • 4
    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? – Jonatan Littke May 03 '12 at 19:57
  • 1
    This is awesome! Does anyone else have any resources that would be of assistance? – mikermcneil Nov 21 '12 at 04:29
  • 15
    I don't think Mike West is right. "mozdirectory" or "directory" doesn't seem to be supported by Firefox. – Dave Lancea Mar 28 '13 at 20:46
  • is there anyway to get Firefox to support this? – ChristopherStrydom Jun 27 '13 at 16:01
  • 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. – Val Aug 16 '13 at 11:10
  • is there any similar way to upload folder on server through IE? – Muneem Habib Nov 26 '13 at 17:13
  • 1
    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. – AturSams Oct 16 '14 at 13:44
  • IE (Edge) - https://msdn.microsoft.com/en-us/library/mt574730(v=vs.85).aspx, FF - unclear for any specific attribute (https://bugzilla.mozilla.org/show_bug.cgi?id=782233), but can do drag-n-drop for folders - http://stackoverflow.com/questions/23423163/html5-drag-and-drop-folder-detection-in-firefox-is-it-even-possible/33431704#33431704 – Alexei Levenkov Dec 09 '15 at 17:12
  • try "multiple" attribute for firefox – Shrikant Shete Jun 20 '18 at 15:04
  • Does this preserve the folder structure? – geoidesic Dec 03 '18 at 17:30
  • 1
    It does not preserve the folder structure, this uploads all the files recursively. How to preserve the directory structure? – Saurabh May 08 '19 at 13:26
  • The link is broken! – ignapas Dec 28 '22 at 13:14