CODEWITHSUNDEEP
javascriptphpjquerygoogle-chrome
user3345547
user3345547

Reputation: 725

upload picture to server from clipboard

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.

Upvotes: 14

Views: 19126

Answers (2)

Sandeep K Nair
Sandeep K Nair

Reputation: 2932

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

Upvotes: 9

Hirak
Hirak

Reputation: 204

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.

Upvotes: 17

Related Questions