14

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.

user3345547
  • 717
  • 2
  • 6
  • 16
  • There's a short article here that details how to use the clipboard to upload an image: https://www.rgraph.net/blog/2022/upload-image-from-clipboard.html – Richard May 06 '23 at 16:37

2 Answers2

17

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.

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

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

Sandeep K Nair
  • 2,512
  • 26
  • 26
  • 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 02:34