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.

Answer 1

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