112

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:
google chrome is retarded Chrome >=38:
google chrome not retarded anymore Firefox: firefox firebug fileAPI

Blob

Passing Blob is probably correct and works in Firefox:

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

Firefox:
Firefox firebug
Chrome <38:
google chrome is retarded
Chrome >=38:
google chrome not retarded anymore

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

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

Improve this question
9
  • 1
    Look like both Chrome and FF use a non-standard syntax, similar to the Blob constructor: new File(["<p>Hello world!</p>"], "hello.html", { type: "text/html" }); Commented Dec 2, 2014 at 14:51
  • Any idea how should I turn Blob into valid first argument? Commented Dec 2, 2014 at 14:52
  • Read the Blob into a string with a FileReader, I guess. Commented Dec 2, 2014 at 14:54
  • @apsillers binary data doesn't work. Nothing works actually. They probably didn't even implement it. Commented Dec 2, 2014 at 15:17
  • 2
    With your atob approach, what error do you see? I don't see any errors in Chrome with c=document.createElement("canvas"); new File([atob(c.toDataURL("image/png").split(",")[1])], "foo.png", {type:"image/png"}); I've also tested with a non-blank canvas as well. Commented Dec 2, 2014 at 15:26

3 Answers 3

Reset to default
219

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")
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

"This is non stadard method used (but useless)" -- seems to imply that the implementation is useless. You referenced the File API TR, but browser implementations generally reference the ED. You can access it by clicking on the "Latest Editor’s Draft" link. I hope this helps.
Browser implementors always use the ED. The downside of using the ED is that some/most browsers might be behind. In general, using the TR should be fine. The File API TR is really old (1 year behind the ED), in general they catch up much faster. I think that in most cases Chromium doesn't ship APIs until their specs reach TR. In this case, Firefox really wanted the File constructor for Firefox OS, so they shipped it. The ED documents changes that they asked for (which are good, btw). Since Firefox shipped, I considered that it's OK to also ship the constructor in Chromium.
The TL;DR is that the standardization process is a bit confusing, and using bleeding-edge features means that you'll have to do a non-trivial amount of digging around. Sorry :(
Thanks for sympathising with me :). You wouldn't believe how much digging around am I doing without any results. I'm used to this with other languages, but with javascript it's for the first time.
Sorry for picking on you earlier, then! I read your bug description on Chromium's bug tracker and got a bit ticked off. Good luck with your code!
|
25

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()})
Improve this answer

Comments

7

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 });
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.