Skip to content

Instantly share code, notes, and snippets.

@sandeepsuvit
Last active January 31, 2020 14:00
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sandeepsuvit/a8ba77faebba260455985504be24aef7 to your computer and use it in GitHub Desktop.
Save sandeepsuvit/a8ba77faebba260455985504be24aef7 to your computer and use it in GitHub Desktop.
Angular2 clipboard paste event
<textarea placeholder="Type a message" (paste)="onPaste($event)"></textarea>
<!-- Place to render the image -->
<img #imgRenderer />
// Reference to the dom element
@ViewChild('imgRenderer') imgRenderer: ElementRef;
onPaste(event: any) {
const items = (event.clipboardData || event.originalEvent.clipboardData).items;
let blob = null;
for (const item of items) {
if (item.type.indexOf('image') === 0) {
blob = item.getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
const reader = new FileReader();
reader.onload = (evt: any) => {
console.log(evt.target.result); // data url!
this.imgRenderer.nativeElement.src = evt.target.result;
};
reader.readAsDataURL(blob);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment