Pasting image from clipboard in Angular doesn't work

Question

I'm trying to retrieve the Files elements from the ClipboardEvent in Angular when copy/pasting an image to a textaera.

Using the (paste)="onPaste($event)" binding, when looking to the console I only get back empty files array:

Here is the stackblitz example to reproduce the issue.

What browser are you using? I can assess the FileList of your StackBlitz in Chrome but not Edge. — JMP
– JMP, Commented Feb 15, 2020 at 10:09
That's strange, I tried it on Firefox (73.0) and Chrome (80.0) on Windows 10 v1909 and both are giving me an empty array when right clicking the image/copy and pasting in the textaera. :/ — NicoC
– NicoC, Commented Feb 15, 2020 at 15:41
Actually it didn’t give the correct file name. I could get the value with: let files = e.clipboardData.files; console.log(files[0].name); but it had image.png for the name — JMP
– JMP, Commented Feb 15, 2020 at 16:12
Well at least you got something. :) What browser version are you using? — NicoC
– NicoC, Commented Feb 15, 2020 at 16:55
I'm not on that PC now, so can't check. Was latest Chrome On Windows. What details do you need of the file? Name or more? — JMP
– JMP, Commented Feb 15, 2020 at 17:02

Oussail · Accepted Answer · 2020-02-19 14:22:17Z

15

+50

Don't care about the console log. it's just a bug with the console.

Try this :

onPaste(e: any ) {
    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
    let blob = null;
    for (const item of items) {
      if (item.type.indexOf('image') === 0) {
        blob = item.getAsFile();
        console.log(blob); // Prints your files
      }
    }
}

Stackblitz Example : Link

PS : If you want the "name" of pasted items, you'll need to solicit input from the user. because Clipboard API doesn't support it

edited Feb 19, 2020 at 14:22

answered Feb 19, 2020 at 13:53

Oussail

2,30813 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pasting image from clipboard in Angular doesn't work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related