10

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 work for Chrome.

Use PHP, Javascript, jquery, or maybe sth else? Some external extension for chrome?

Thanks a lot.

15

You can try:

https://github.com/layerssss/paste.js

Or

On paste event and clipboard API

http://www.w3schools.com/jsref/event_onpaste.asp

https://www.w3.org/TR/clipboard-apis/

How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?

After you get image in javascript you can send base64 encoded image to server with AJAX. At server-side, you can decode it and write to a file.

Note: This works if you copy image inside browser (from other tab or window). It doesn't work when you copy image from desktop.

1
  • I would love to know why someone downvoted the answer without a comment for their reason. – Brain Sep 11 '17 at 10:54
3

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
<textarea placeholder="Type a message" (paste)="onPaste($event)"></textarea>
<!-- Place to render the image -->
<img #imgRenderer />
  1. 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

1
  • It has been a long time but I don't understand either because solution you suggested works and solves what original question is looking for. – Emilio Numazaki May 28 '20 at 2:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.