Drag and drop a folder

  • Not supported in Firefox
  • Supported in Chrome
  • Not supported in Safari
  • Not supported in IE
  • Not supported in Opera

Chrome has just added support for Entry items to drag and drop, these entries can either be FileEntry or DirectoryEntry. Using the new DirectoryEntry you can allow users to drop a folder on a page, read its structure and access the files in that structure.

This demo allows you to drag and drop a folder into the dropzone below. The code will display the directory and file structure as a tree. It will also display any text, png, jpeg and gif files it finds within the folder structure. At the moment this demo only works with Chrome 21 or higher

  • Drag and drop folder here

Object, method, and property compatibility

  Firefox 13.0.1 Chrome 22.0 Safari 6.0 IE 9.0 Opera 11.62
e.dataTransfer.items No Yes No No No
getAsEntry No Yes No No No
DirectoryReader No Yes No No No
FileReader Yes Yes Yes No Yes

Notes

There are a few things to note about coding with the File API objects, first there are a lot of methods that are asynchronous. You have to code with callbacks. The readEntries method of the DirectoryReader object works like a stream reader and may need to be called more than once to get all the results. This means you need to keep calling DirectoryReader.readEntries() until no more results are returned.

Useful Links