What is a DataTransferItemList and what does DataTransferItemList.add do?

Question

So, I am trying to understand pasteand copyAPI in Google Chrome. I do not understand too.

As with copy, you probably want to use javascript to add something to the clipboard . I work with images (strings work really well ¹ ):

//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 really don't know how this method works add. I found this “documentation” for a DataTransferItemList that says:

    add(any data, optional DOMString type)

? ( - ?) - , , . - Chrome. , DataTransferItemList:

, <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);
}

²:

event.target.result, , :

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

• Q: DataTransferItemList, , .add?

^{1: ( , !), : event.clipboardData.setData(data, "text/plain");. , , - image/png .}

^{2: , .}