[whatwg] Expose event.dataTransfer.files accessor to allow 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. I wasn't clear on this part -- how is the proposal consistent with the HTML5 drag drop security model? ~noel
[whatwg] Expose event.dataTransfer.files accessor to allow file drag and drop
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
Re: [whatwg] Expose event.dataTransfer.files accessor to allow file drag and drop
On Wed, 10 Jun 2009 10:37:03 +0200, Adam Barth wha...@adambarth.com wrote: 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. This is indeed very cool, but http://www.w3.org/TR/file-upload/ is very unstable (and from 2006!) so it seems that would have to be settle a bit more first. At the very minimum a shared understanding of what interfaces we want to provide to deal with files. -- Anne van Kesteren http://annevankesteren.nl/
Re: [whatwg] Expose event.dataTransfer.files accessor to allow file drag and drop
On Wed, Jun 10, 2009 at 10:37 AM, Adam Barth wrote:
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.
[...]
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).
It should be noted also that Adobe AIR has
getData(application/x-vnd.adobe.air.file-list) [1] and Gears
(starting with 0.5.21.0, as announced at Google I/O) has its own (not
yet documented) API with a files property [2] (as requested here).
[1]
http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS7709855E-7162-45d1-8224-3D4DADC1B2D7.html
[2]
http://code.google.com/p/gears/source/browse/trunk/gears/test/manual/drag_and_drop.html#109
--
Thomas Broyer
