Drag and drop files

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

If you use the HTML5 Drag and Drop API with the File API together on modern browsers you can allow your users to drop files onto a page. Once the files have been dropped onto the page the File API lets you read the contents of the files.

This demo allows you to drag a collection of files onto the dropzone below. The code will display the file name of each file dropped. It will also display the contents of any text, png, jpeg and gif files. At the moment this demo works with Chrome, Firefox, Opera and Safari.

  • Drag and drop files here

Object, method, and property compatibility

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

The documentation for IE 10 surggest that on release it will have full support for HTML5 Drag and Drop and the File API

Notes

The things to note about coding with the File API objects, is that lot of methods that are asynchronous. You have to code with callbacks. It worth taking a closer look at the different read methods such as readAsText and readAsDataURL.

Useful Links