How to create File object from Blob?

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.

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")

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()})

this works with me, from canvas to File [or Blob], with filename!

var dataUrl = canvas.toDataURL('image/jpeg');
var bytes = dataUrl.split(',')[0].indexOf('base64') >= 0 ?
          atob(dataUrl.split(',')[1]) :
          (<any>window).unescape(dataUrl.split(',')[1]);
var mime = dataUrl.split(',')[0].split(':')[1].split(';')[0];
var max = bytes.length;
var ia = new Uint8Array(max);
for (var i = 0; i < max; i++) {
  ia[i] = bytes.charCodeAt(i);
}

var newImageFileFromCanvas = new File([ia], 'fileName.jpg', { type: mime });

Or if you want a blob

var blob = new Blob([ia], { type: mime });