<font face="arial,helvetica,sans-serif">It's come to my attention that FileReaderSync is only available on worker threads. Since the general trend seems to be moving towards no synchronous operations on the main thread, I'd like to propose changing getData() and setData() to only </font><span class="Apple-style-span" style="font-family: arial, helvetica, sans-serif; ">handle the legacy types 'Text' and 'URL' for IE compatibility. If you want to handle any other types, you must go through getDataAsBlob()/setDataAsBlob().</span><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">Daniel<br></font><div><br><div class="gmail_quote">On Fri, Oct 29, 2010 at 15:31, Daniel Cheng <span dir="ltr"><<a href="mailto:dcheng@google.com">dcheng@google.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;"><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"><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 face="arial, helvetica, sans-serif">DataTransfer.prototype.getData = function (format) {</font></div>
<div><font face="arial, helvetica, sans-serif"> var reader = new FileReaderSync();</font></div><div><font face="arial, helvetica, sans-serif"> var blob = this.getDataAsBlob(format);</font></div>
<div><font face="arial, helvetica, sans-serif"> return reader.readAsText(blob);<br>}</font><span style="font-family:arial, helvetica, sans-serif">;</span></div><div><font face="arial, helvetica, sans-serif">DataTransfer.prototype.setData = function (format, data) {</font></div>
<div><font face="arial, helvetica, sans-serif"> var builder = new BlobBuilder();</font></div><div><font face="arial, helvetica, sans-serif"> builder.append(data);</font></div>
<div><font face="arial, helvetica, sans-serif"> this.setDataAsBlob(format, builder.getBlob());<br>};</font></div><div><font face="arial, helvetica, sans-serif"><br></font></div>
<div><font 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><font color="#888888"><div><font face="arial, helvetica, sans-serif">Daniel</font></div>
</font></blockquote></div><br></div></div>