Javascript FileAPI: Iterating Directories?

Question

Firefox 3.6 let's you drop a directory onto some element (using the Drag And Drop API) and process those files with the FileAPI. How does that work with directories?

The Mac OS X Finder displays some directories as Files (.app, .tmbundle, .abbu, …). In most cases this is wonderful. In the case of interacting with the browser via File- and DND-APIs it's not. The end-user is incapable of differentiating between a real file and a sort-of-file like my-addressbook-backup.abbu.

The Javascript UI must therefore be able to identify directory structures. If it's not capable of traversing the structure, it must inform the user accordingly.

Any ideas on how either can be accomplished?

Edit:

I can see the (potential) problems arising when allowing JS to traverse directories. I'm not calling for a directory traversal per se (although I wouldn't bind being able to). I'm talking about Foo.app being treated as a file (as so seen by the user through Finder.app) but actually being a directory (as so seen when looking at it in Terminal.app).

The File API currently doesn't provide any traversing mechanisms. So, deeper nested files within an addressbook-dump.abbu wouldn't be accessible. Are there any thoughts on making this possible?

Otherwise I'd have to tell my OSX users to make an archive (e.g. ZIP) of their address book file and "upload" that zip (which I can actually read in JS). Though this is a workaround, not a solution.

Answer 1

Theoretically, what you describe is doable with the FileReader API. For example, this demo reads a .zip file (hit load photos.zip), unpacks its contents, and displays the list of pictures it contains to the user.

For general folder drag and drop, there are two bugs holding Chrome/WebKit back: 1, 2. When those get fixe, you'll be able to drag a folder from the OS onto an <input type="file" webkitdirectory> and traverse all its hierarchy. To see webkitdirectory in action, check out this demo in Chrome.