Menu
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
addonDataTransferItemList: 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.
297
To convert Blob to File in JavaScript, we can use the File constructor. const file = new File([myBlob], "name"); to create a File object with the myBlob blob object in the array. The 2nd argument is the file name string.
A File object is a specific kind of Blob , and can be used in any context that a Blob can. In particular, FileReader , URL. createObjectURL() , createImageBitmap() , and XMLHttpRequest.
To construct a Blob from other non-blob objects and data, use the Blob() constructor. To create a blob that contains a subset of another blob's data, use the slice() method. To obtain a Blob object for a file on the user's file system, see the File documentation.
getContext("2d"); // Get the "context" of the canvas var img = document. getElementById("myimage"); // The id of your image container ctx. drawImage(img,0,0,width,height); // Draw your image to the canvas var jpegFile = canvas. toDataURL("image/jpeg"); // This will save your image as a //jpeg file in the base64 format.
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")
183
This was the complete syntax which I had to use to convert a blob into a file, which I later had to save to a folder using my server.
var file = new File([blob], "my_image.png",{type:"image/png", lastModified:new Date().getTime()}) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
