5

So I'm trying to understand paste and copy API in Google Chrome. I don't understand either.

As of copy, you'll probably want to use javascript to add something in clipboard. I'm working with images (strings work well actually1):

//Get DataTransferItemList
var files = items.items;

if(files) {
  console.log(files);
  //Create blob from canvas
  var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));

  var file;
  try {
    //Try to create file from blob, which may fail
    file = new File([blob], "image.png", {type:"image/png"}); 
  }
  catch(e) {
    return false;
  }
  if(file) {
    //I think this should clear previous data from clipboard
    files.clear();
    //Add a file as image/png
    files.add(file, "image/png");
  }
  //console.log(files.add(file));
}

The problem is, that I don't really know how does that add method work. I found this "documentation" for DataTransferItemList which says:

    add(any data, optional DOMString type)

What's any data? (how can anybody even write this in documentation?) While something is added to clipboard, I don't know what it is. I can't paste it anywhere - except Chrome. If I inspect paste event with my copied file, this is in DataTransferItemList:

DataTransferItemList

It can be converted to File, but if I try to turn it back to <img>:

ImageEditorKeyboard.prototype.processFile = function(file) {
  //File reader converts files to something else
  var reader = new FileReader();
  //Refference to this class
  var _this = this;
  //happens when the file is loaded
  reader.onload = function(event) {
    var img = new Image;
    img.onload = function() {
      _this.processImage(this);
    };
    img.src = event.target.result;
  }; // data url!
  //Read file
  reader.readAsDataURL(file);
}

I get the error2:

GET data: net::ERR_INVALID_URL

If I log the value of event.target.result it turns out that the data was empty:

console.error("String '", event.target.result, "' ain't a valid URL!");

String ' data: ' ain't a valid URL!

  • Q: What is the exact specification of DataTransferItemList, it's methods and properties, especially the .add method?

1: To add string to clipboard (during copy event of course!), call this: event.clipboardData.setData(data, "text/plain");. The second argument doesn't seem to have any functionality - using image/png will not do anything.

2: Funny thing is that this error can't be caught.

Community
  • 1
  • 1
Tomáš Zato
  • 50,171
  • 52
  • 268
  • 778
  • 1. afaik, text/html works as well as text/plain, but there's a small number of acceptable formats, not just anything works. 2. i know the interface provides access to pasting files, but i don't believe that you can copy files to the clipboard from js yet. (i could be wrong) – dandavis Dec 03 '14 at 04:39
  • @dandavis The evidence above says that I can copy in clipboard but it's not fully functional. Maybe the data are not really in clipboard but just in google chrome memory. I found no convenient program to discover what's being (in hex or binary) added to clipboard. – Tomáš Zato Dec 03 '14 at 04:43

0 Answers0