Javascript - How to display a pasted clipboard image

Question

Here I have a <div> and an <img> tag.

<div id='input' style="width: 500px; min-height: 40px; border: solid black;"></div><br>

<img id="img" style="width: 100px; min-height: 100px; border: gray;"></img>

Let's say I copied an image to my clipboard from my browser, and if I paste (ctrl+v) the image onto the <div>, the image appears at the <img> tag. What script is needed to achieve this?

Does this help? https://stackoverflow.com/questions/60503912/get-image-using-paste-from-the-browser — Chaska, Oct 16 '20 at 05:38
In case you face some trouble moving this FIle to the ``, you can simply set `img.src = URL.createObjectURL( file )`. — Kaiido, Oct 16 '20 at 05:50

Vincenzo Manto · Accepted Answer · 2020-10-16T05:58:31.397

2

You can just use this onPaste event, extracting the first file in clipboard:


    document.getElementById('input').onpaste = (e) => {
      const eventData = window.clipboardData || e.clipboardData ;
      const theFile = eventData.files[ 0 ];
    };

    <div id='input' style="max-height: 500px; max-height: 40px; border: solid black;" contenteditable></div><br>

    <img id="img" style="width: 100px; min-height: 100px; border: gray;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1004px-Google_%22G%22_Logo.svg.png">

In the example you can copy the logo and paste it in the div

edited Oct 16 '20 at 05:58

answered Oct 16 '20 at 05:45

Vincenzo Manto

886
1
11
30

Your js doesn't do anything useful here... – Kaiido Oct 16 '20 at 05:47
1

Yes, with that js you have direct access to the clipboard file and you can use it however you want. – Vincenzo Manto Oct 16 '20 at 05:53
I know that (I answered the question this one is a dupe of), but here in this live snippet it's not doing anything, the live snippet is useless. – Kaiido Oct 16 '20 at 05:56
Ok, I'll remove it – Vincenzo Manto Oct 16 '20 at 05:57

Javascript - How to display a pasted clipboard image

1 Answers1