File Under: APIs, HTML5

Chrome 21 Adds New Drag-and-Drop Tricks

HTML5 offers developers a File API with drag-and-drop support to make web apps behave a bit more like desktop apps. Provided you’ve got a modern web browser and are using a web app that supports it (Gmail and Flickr are among the hundreds that do), uploading files works just like moving files on the desktop — drag and drop them where you want them.

The key word there is files, though. Drag and drop a folder of files and you’re out of luck. Currently browsers just ignore folders dropped into them. Chrome, however, recently added folder support to its bag of drag-and-drop tricks. You’ll need to be using Chrome 21 or better (currently in the dev channel).

If you’d like to see how the new folder parsing works, HTML5Rocks has a quick little tutorial on how you can add support for folders to your web app.

The JavaScript required to support folders consists of an extra loop to tunnel through folders and get to “Entry” objects. That’s a slightly different syntax than what you might have seen if you’ve read tutorials on the File API in the past — using “Entry” instead of “File”. There are two new properties as well — .isFile and .isDirectory.

As always with cutting edge tools, we don’t suggest using this one in the wild just yet. You’ll need Chrome 21 or better for it to work and it’s not yet an official standard, but you can learn more over at the WHATWG wiki.