Angular paste picture from clipboard

Question

I'm trying to create a functionality where users can paste a picture on the page son I can upload it to the server and show it to he user.

I'm aware of the paste event, and tried to implement from there but haven't been able to access any data from the clipboard from the event, either the files or items array from the clipboard field of the event are always empty when I press ctrl + v.

here's the code:

    <div (paste)="pastePicture($event)" style="height: 300px; width: 300px; background-color:#ccc;">
</div>

  pastePicture(event: ClipboardEvent) {
console.log(event);  }

https://plnkr.co/edit/QmELBtWJqjAuEwGPiCZh?p=preview

Any thoughts on this?

Answer 1

You can get all data from the event using property event.clipboardData. For example, to get text data you can call: event.clipboardData.getData('text'). Also you can find properties: files, items and types which would help you to get more content.