<font face="arial, helvetica, sans-serif">I've been thinking about how to extend DataTransfer to support non-text types, such as images or RTF. Some use cases that this would enable:</font><div><font face="arial, helvetica, sans-serif">- Copying and pasting images between Photoshop and a web-based image editing app such as </font><a href="http://canvaspaint.org/" target="_blank">http://canvaspaint.org/</a><span style="font-family:arial, helvetica, sans-serif">.</span></div>




<div><font face="arial, helvetica, sans-serif">- Copying a slide with inline pictures from a presentation and pasting it into an email without losing any of the formatting.</font></div><div><font face="arial, helvetica, sans-serif"><br>

</font></div><div><font face="arial, helvetica, sans-serif">Since the data might be in text or binary form, I propose adding Blob support to DataTransfer. The proposed additions would add the following two functions to DataTransfer:</font></div>

<div><font face="arial, helvetica, sans-serif">Blob getDataAsBlob(in DOMString format);</font></div><div><font face="arial, helvetica, sans-serif">void setDataAsBlob(in DOMString format, in Blob data);</font></div><div><font face="arial, helvetica, sans-serif"><br>

</font></div><div><font face="arial, helvetica, sans-serif">Callers would use it like this:</font></div><div><font face="arial, helvetica, sans-serif"><script></font></div><div><font face="arial, helvetica, sans-serif">document.addEventListener('paste', function (event) {</font></div>

<div><font face="arial, helvetica, sans-serif">  var imageBlob = event.dataTransfer.getDataAsBlob('image/png');</font></div><div><font face="arial, helvetica, sans-serif">  var reader = new FileReaderSync();</font></div>

<div><font face="arial, helvetica, sans-serif">  var newImage = document.appendChild(document.createElement('img'));</font></div><div><font face="arial, helvetica, sans-serif">  newImage.src = reader.readAsDataURL(imageBlob);<br>

});</font></div><div><font face="arial, helvetica, sans-serif">document.addEventListener('copy', function (event) {</font></div><div><font face="arial, helvetica, sans-serif">  var bb = new BlobBuilder();</font></div>

<div><font face="arial, helvetica, sans-serif">  bb.append(someFunctionThatConvertsAnImageSelectionToAnArrayBuffer());</font></div><div><font face="arial, helvetica, sans-serif">  event.dataTransfer.setData('image/png', bb.getBlob());</font></div>

<div><font face="arial, helvetica, sans-serif">});</font></div><div><font face="arial, helvetica, sans-serif"></script></font></div><div><font face="arial, helvetica, sans-serif"><br></font></div><div><font face="arial, helvetica, sans-serif">By using Blob, callers have the freedom to pick a synchronous or asynchronous model. For example, to avoid blocking the page, an image editing app might choose to read pasted image data asynchronously in a callback:</font></div>
<div><font face="arial, helvetica, sans-serif"><script></font></div><div><font face="arial, helvetica, sans-serif">function onImageLoaded(event) {</font></div><div><font face="arial, helvetica, sans-serif">  // Do something with the event.target.result.<br>
}</font></div><div><font face="arial, helvetica, sans-serif"><meta charset="utf-8"><span class="Apple-style-span" style="font-family: arial; "><div><font face="arial, helvetica, sans-serif">document.addEventListener('paste', function (event) {</font></div>
<div><font face="arial, helvetica, sans-serif">  var imageBlob = event.dataTransfer.getDataAsBlob('image/png');</font></div><div><font face="arial, helvetica, sans-serif">  var reader = new FileReader();</font></div>
<div><font face="arial, helvetica, sans-serif">  reader.onload = onImageLoaded;</font></div><div><font face="arial, helvetica, sans-serif">  var newImage = document.appendChild(document.createElement('img'));</font></div>
<div><font face="arial, helvetica, sans-serif">  reader.readAsDataURL(imageBlob);<br>});</font></div><div><font face="arial, helvetica, sans-serif"></script></font></div><div><font face="arial, helvetica, sans-serif"><br>
</font></div></span></font></div><div><font face="arial, helvetica, sans-serif">In addition, getData() and setData() could be redefined to be based on the two new functions:</font></div><div><font class="Apple-style-span" face="arial, helvetica, sans-serif">DataTransfer.prototype.getData = function (format) {</font></div>
<div><font class="Apple-style-span" face="arial, helvetica, sans-serif">  var reader = new FileReaderSync();</font></div><div><font class="Apple-style-span" face="arial, helvetica, sans-serif">  var blob = this.getDataAsBlob(format);</font></div>
<div><font class="Apple-style-span" face="arial, helvetica, sans-serif">  return reader.readAsText(blob);<br>}</font><span class="Apple-style-span" style="font-family: arial, helvetica, sans-serif; ">;</span></div><div><font class="Apple-style-span" face="arial, helvetica, sans-serif">DataTransfer.prototype.setData = function (format, data) {</font></div>
<div><font class="Apple-style-span" face="arial, helvetica, sans-serif">  var builder = new BlobBuilder();</font></div><div><font class="Apple-style-span" face="arial, helvetica, sans-serif">  builder.append(data);</font></div>
<div><font class="Apple-style-span" face="arial, helvetica, sans-serif">  this.setDataAsBlob(format, builder.getBlob());<br>};</font></div><div><font class="Apple-style-span" face="arial, helvetica, sans-serif"><br></font></div>
<div><font class="Apple-style-span" face="arial, helvetica, sans-serif">One issue that I'm not clear how to resolve is the issue of Blob.size. In general, the UA won't be able to populate Blob.size without reading in all the data first... which defeats the point of using Blob to begin with. Since people may not read Blob.size very often in the context of copy-and-paste or drag-and-drop, maybe it's acceptable to lazily populate Blob.size only if people try querying its value? People who want async behavior won't truly get it if they query Blob.size, but I don't see another way around the problem.</font></div>
<div><font face="arial, helvetica, sans-serif"><br></font></div><div><font face="arial, helvetica, sans-serif">Daniel</font></div>