6

I know that it is possible to upload files using drag and drop with the HTML5 File API. Can this also be done by copying a file from the file explorer and paste it into a web page using CTRL-V/CMD-V or by pasting from the right click context menu?

Jørgen
  • 8,820
  • 9
  • 47
  • 67

1 Answers1

3

You can't do that.

You can get the file path easily with this :

$(document).on('paste',function(e){
    var path = e.originalEvent.clipboardData.getData("text");
});​

So you may show it to the user.

But you can't change yourself the value of an <input type=file>.

That's a security measure : imagine if your script could change the path of the file to be uploaded just before the user submits the form (or even without user interaction as is now possible with other form elements) ? As for every important security protection, there is no known "workaround" for modern browsers.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • Using the HTML5 Drag & drop API in combination with the File API, you can get the content of a client file. Tutorial here: http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/ I wonder if I could get the content from the clipboard the same way. – Jørgen Aug 29 '12 at 09:56
  • 1
    All the documents I read seem to show that this can only be allowed (using DataTransfer.effectAllowed) on drag and drop operations but I'm not 100% sure. Sources : http://www.w3.org/TR/2011/WD-clipboard-apis-20110412/ http://dev.w3.org/html5/spec/dnd.html http://www.w3.org/TR/clipboard-apis/ – Denys Séguret Aug 29 '12 at 10:09