Home » Php » javascript – upload picture to server from clipboard

javascript – upload picture to server from clipboard

Posted by: admin July 12, 2020 Leave a comment


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.

How to&Answers:

You can try:



On paste event and clipboard API



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.


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;

Here is a live implementation: