JavaScript insert event works fine in Chrome but not in Firefox

Question

My initial goal is to get an image pasted from the clipboard. But I have problems getting the insert event.

In JSFiddle, where I reproduced the problem, HTML contains only div:

<div style="width: 200px; height: 200px; background: grey" id="pasteTarget" > </div> 

JavaScript first binds my handlePaste () function to the insert event.

 window.onload = function() { //adding paste event listener on the div document.getElementById("pasteTarget"). addEventListener("paste", handlePaste); }; 

This function should be called when the user presses Ctrl + V or selects "paste" in the browser menu.

 function handlePaste(e) { alert("I'm in handlePaste"); for (var i = 0 ; i < e.clipboardData.items.length ; i++) { var item = e.clipboardData.items[i]; console.log("Item: " + item.type); alert(item.type); } } 

Important: this function calls on e.clipboardData to get the contents of the clipboard. For example, if you press the PrtScrn key, then Ctrl + V, you send the image from the print screen to the handlePaste method. The last warning displays "image / png" when it is working fine.

Chrome v37: JsFiddle works fine. Firefox v32: the handlePaste () method is not called, the first warning does not appear.

JsFiddle Code: http://jsfiddle.net/demeylau/ke44bufm/1/

Answer 1

As far as I can tell, you'll have to handle the insert separately for the browser agent. Joshua Gross covers many of the intricacies of the insert in this article: Insert Wasteland

Firefox loves to be even dumber, but you can read image data as a file, processing clipboard data like Blob. (see the postscript in Gross's article) This is a pretty loose-legged code in browsers that handle OS events in several different ways and briefly summarize why we have newer features standardized in things like WebAPI. Hope this helps.