Cómo obtener datos del portapapeles en Firefox

Question

Me gustaría activar el evento onpaste en el elemento para recuperar datos en el portapapeles (quiero verificar si la imagen existe en el portapapeles y subirla al servidor). Funciona perfecto en Chrome:

$('#textarea')[0].onpaste = function(event) 
{ 
    var items = event.clipboardData.items; 

    if (items.length) 
    { 
     var blob = items[0].getAsFile(); 
     var fr = new FileReader(); 

     fr.onload = function(e) 
     { 
      alert('got it!'); 
     } 

     fr.readAsDataURL(blob); 
    } 
} 

no funciona en Firefox: event.clipboardData.items no existe. ¿Tienes alguna idea de cómo recuperar el evento onpaste en element?

Answer 1

Parece que no. Lo siento.

http://support.mozilla.org/en-US/kb/Granting%20JavaScript%20access%20to%20the%20clipboard

JavaScript get clipboard data on paste event (Cross browser)

Answer 2

Claro que puedo. En este ejemplo puedo recuperar la imagen desde el portapapeles después de usar Ctrl + V:

<div id="foo" style="width: 200px; height: 200px" contenteditable="true">Paste here!</div> 
$('#foo')[0].onpaste = function(e) 
{     
    setTimeout(function() 
    { 
     var blob = $('#foo img').attr('src'); 


     $.post('/upload/image', {'data': blob}, function(result) 
     { 


     }, 'json'); 

    }, 200); 
} 

Funciona con <div> elemento que tiene contenteditable atributo, pero no funciona con <textarea>

P. S. Perdón por responder mi propia pregunta, pero este fragmento de código podría ayudar a alguien.

Answer 3

Es necesario crear un div contenteditable que contendrá la imagen de pasta de

var pasteCatcher = $('<div/>',{'id':'container'}); 
$('body').append(pasteCatcher); 
var pasteCatcher = document.getElementById('container'); 
       pasteCatcher.setAttribute("contenteditable", ""); 

entonces tienes que esperar para el evento de pasta y procesarlo

window.addEventListener("paste",processEvent); 
function processEvent(e) { 
//some functionality 
} 

también escribir el código para agarrar el datos de imagen de div contenida y envíelos al servidor.