Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to read a file on paste event in HTML5

In HTML5 we know that we can read files using predefined API. As of now I have tried

<input type="file"> and the File Drop method. They have worked fine for me.

But I want to know the possibility of pasting a file on a div and capturing the file on paste. For Example

 $('#dummyDIV').bind('paste',function()
 {
      // Like var file = files[0]
 });

Thanks

like image 492
Exception Avatar asked Dec 20 '11 15:12

Exception


People also ask

How do I disable paste in HTML?

You can disable cut, copy, and paste using the oncut, oncopy, and onpaste event attributes with the target HTML elements. If you want to disable cut, copy, and paste for the complete web page, you need to use these event attributes with the body tag.

How do I paste text into Javascript?

We'll first need to assign this field to a variable and attach a click handler. const paste = document. getElementById('paste'); paste. addEventListener('click', () => { // Do our action });

How do I turn off copy paste field password?

The onpaste attribute lets us prevent pasting into the form. Adding the autocomplete attribute as well as preventing drag and drop into the element. If you want to avoid the on{event} code in the HTML, you can do it the cleaner way: myElement.


1 Answers

You can only read the file name of pasted file.

http://jsfiddle.net/vdNFR/

$('body').bind('paste', function(a, b, c) {
    console.log(a.originalEvent.clipboardData);
    console.log(a.originalEvent.clipboardData.getData('File'));
    console.log(a.originalEvent.clipboardData.getData('Text'));
    if (a.originalEvent.clipboardData.files[0]) console.log(a.originalEvent.clipboardData.files[0].getAsFile());
    if (a.originalEvent.clipboardData.items[0]) console.log(a.originalEvent.clipboardData.items[0].getAsFile());
    console.log(a, b, c);
});

It would be a major security hole if any browser would allow this situation to happen.

like image 159
kaz Avatar answered Sep 28 '22 00:09

kaz