upload picture to server from clipboard

Question

I was looking a long time for the solution, but I can not find any. Is there any possibility to upload picture from clipboard to file on server (by pressing ctrl+v) ? It could w

Answer 1

This is from an example with angular2 typescript that works for my project. Hope it helps someone. Logic is same for other cases as-well.

1. angular-clipboard-event.html

2. angular-clipboard-event.ts

// 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);
    }
  }

Here is a live implementation:

https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts