How to obtain data from clipboard in Firefox

Question

I would like to trigger onpaste event on element to retrieve data in clipboard (I want to check if image exists in clipboard and upload it into the server). It works perfect on 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);
    }
}

Does not work on Firefox: event.clipboardData.items does not exists. Do you have any idea how to retrive onpaste event in element?

Answer 1

You need to create one contenteditable div which will hold the image on paste

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

then you need to wait for paste event and process it

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

Also write the code to grab the image data from contenteditable div and send it to server.