DataTransferItemList.add
allows you to override copy operation in javascript. It, however, only accepts File
object.
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
onDataTransferItemList
: parameter 1 is not of typeFile
.
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.
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.
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:
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:
File
from Blob
?Note: I added more screenshots after @apsillers reminded me to update Google Chrome.
The File constructor (as well as the Blob constructor) takes an array of parts. A part doesn't have to be a DOMString. It can also be a Blob, File, or a typed array. You can easily build a File out of a Blob like this:
new File([blob], "filename")
Please refrain from stating that browsers don't implement the spec or that the spec is useless if you don't take the time to understand the spec process or the spec itself.