DataTransferItemList.add allows you to override copy operation in javascript. It, however, only accepts File object.

Copy event

The code in my copy event:

var items = (event.clipboardData || event.originalEvent.clipboardData);

var files = items.items || items.files;



if(files) {

  var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));

  files.add(blob);

}

The error in chrome:

Uncaught TypeError: Failed to execute add on DataTransferItemList: parameter 1 is not of type File.

Trying the new File(Blob blob, DOMString name)

In Google Chrome I tried this, according to the current specification:

var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));  

var file = new File(blob, "image.png");

Problem here is, that Google Chrome doesn't stick to specifications very much.

Uncaught TypeError: Failed to construct File: Illegal constructor

Neither does Firefox in this case:

The method parameter is missing or invalid.

Trying the new File([Mixed blobParts], DOMString name, BlobPropertyBag options)

Solution suggested by @apsillers doesn't work too. This is non stadard method used (but useless) in both Firefox and Chrome.

Binary data

I tried to avoid blob, but the file constructor failed anyway:

  //Canvas to binary

  var data = atob(   //atob (array to binary) converts base64 string to binary string

    _this.editor.selection.getSelectedImage()  //Canvas

    .toDataURL("image/png")                    //Base64 URI

    .split(',')[1]                             //Base64 code

  );

  var file = new File([data], "image.png", {type:"image/png"}); //ERROR

You can try that in console:

Chrome <38:


Chrome >=38:


Firefox:

Blob

Passing Blob is probably correct and works in Firefox:

var file = new File([new Blob()], "image.png", {type:"image/png"});

Firefox:



Chrome <38:



Chrome >=38:

• Q: So how can I make File from Blob?

Note: I added more screenshots after @apsillers reminded me to update Google Chrome.