2

Overview

When dragging and dropping a file onto a page, you can get the file via event.dataTransfer.files when going through all the drag/drop related events. Each file object then has a name attribute.

When pasting a file onto a page, you get the "item" via event.clipboardData.items (which isn't quite an array or an normal object, but I digress) in the onpaste event. The item object then has a getAsFile() method, but this returns a Blob, not a File, so the name attribute is missing.

What I'm trying to do

I would like to get to the filename so I can send it along to store as metadata with the image when I upload the image later.

Is Chrome just buggy?

You would think that they would just reuse event.dataTransfer for this purpose, but that's undefined. You would also think that getAsFile() would return a File, but again the browser makers decided against the obvious. Here are the specs for what getAsFile should do: http://www.w3.org/TR/html/editing.html#dom-datatransferitem-getasfile

Pre-empting some of the inevitable comments:

All this is true at least in Chrome. Let's just say I only care about Chrome and maybe the latest versions of Safari and Firefox for now.

I've seen in comments elsewhere that people seem to think browsers would "never" allow files to be copy/pasted due to "obvious security concerns", yet they do allow them to be dragged and dropped, so let's please skip past that flawed argument.

Conclusion:

Is there any way to get to the pasted file's name? Is this just a bug in Chrome's implementation?

UPDATE

I created a pen on codepen that demonstrates the issue: http://codepen.io/lerouxb/pen/hiLux It also looks like Chrome is at fault here, so I submitted a bug: https://code.google.com/p/chromium/issues/detail?id=361145

Le Roux Bodenstein
  • 187
  • 2
  • 10

1 Answers1

2

Chrome is the only browser that fully implements the Clipboard API. And, as you have noticed, the pasted item is made available as a Blob. It's not 100% clear if this is an error in the implementation of the Clipboard API in Chrome. The spec suggests that it may be, but this has been in place for some time in Chrome, so you'll need to work around it. Another thought here is that there is no file name, since there is no file, just clipboard data. If you want to "name" pasted items, you'll need to solicit input from the user.

Ray Nicholus
  • 19,538
  • 14
  • 59
  • 82
  • Thanks. I ended up filing a bug report because it appears to be wrong according to the specs: https://code.google.com/p/chromium/issues/detail?id=361145 – Le Roux Bodenstein Apr 08 '14 at 15:12
  • Apart from that the specs appear state that clipboardData should just be a dataTransfer object, so to me it would make sense that the files attribute shouldn't have length 0. It is all in the specs and if you look at the objects in Chrome they have the right types and attributes (talking about event attributes, not getAsFile's return type), they just aren't filled in. – Le Roux Bodenstein Apr 08 '14 at 15:14
  • I think the chances of this being "fixed" are close to zero. In fact, there's a better chance that the clipboard API will be dropped from the spec entirely since it has not been adopted by any browser other than Chrome. This is all just speculation on my part though, so take with a grain of salt. – Ray Nicholus Apr 08 '14 at 15:17
  • Yeah, yeah, but what else can one do? :) – Le Roux Bodenstein Apr 08 '14 at 15:18
  • for anyone else who shows up here, the bug mentioned above has been fixed! – geoboy Jun 09 '17 at 19:20