[whatwg] Expose event.dataTransfer.files accessor to allow file drag and drop

Adam Barth whatwg at adambarth.com
Wed Jun 10 01:37:03 PDT 2009


SUMMARY

Currently the <input> element exposes selected files via a "files"
accessor (i.e., as in https://developer.mozilla.org/En/NsIDOMFileList
and http://www.w3.org/TR/file-upload/).  We should add a similar
accessor to event.dataTransfer to enable drag-and-drop of files onto
web pages.

USE CASE

When interacting with a webmail site, users would like to be able to
attach files to email messages by dragging them onto the browser's
content area, as in desktop email clients.  My understanding is that
this is one of the top user requests for Gmail, for example.

WORK AROUNDS

Currently, webmail sites work around this limitation by using the
fugly <input type="file"> control or by using a plug-in, such as
Flash, to handle file uploads.  Other sites, such as Flickr, work
around this limitation by asking users to download an EXE (i.e., the
Flickr uploader) that handles file drag-and-drop.

PROPOSAL

When the user drags-and-drops files onto a web page, we should expose
those files to the page via a "files" accessor on the dataTransfer
property of the event object.  This feature is consistent with HTML
5's security model for drag and drop.  There are a number of different
API choices, but this appears to be the cleanest and most consistent
with the future of web pages interacting with local files.

Alternative APIs include getData('File'), as defined in
http://msdn.microsoft.com/en-us/library/ms537658(VS.85).aspx.
However, it does not appear that IE ever implemented this API.  (Also,
note that IE doesn't follow HTML 5's clipboard security model.)
Mozilla has an equivalent API in
event.dataTransfer.mozGetDataAt("application/x-moz-file", 0).

Exposing the files attribute is better than these alternatives because
it lets the web page get an object of type File, which can then be
handed off to a future version of XMLHttpRequest, as in
xhr.send(file), without synchronous access to the disk.

IMPLEMENTATION

WebKit has an experimental implementation of this API in
https://bugs.webkit.org/show_bug.cgi?id=25916.

Adam



More information about the whatwg mailing list