Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 574
user3345547 Avatar asked Jul 03 '16 05:07

user3345547


People also ask

How do I save a picture from the clipboard on my computer?

Steps to save a clipboard image as a JPG or PNG file: Press the 'S' key on your keyboard. Navigate to the image you want to save as JPG or PNG. After locating the image, click the 'New” button in the Snipping Tool app. If the image is stored on your computer, open it in photos first.

How do I upload a photo?

On a computer, this will usually entail clicking the Pictures or Photos section of the window that appears, clicking the photo that you want to upload, and clicking Open. On most phones and tablets, tapping the "Upload Photo" option will open your camera roll directly.


2 Answers

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

like image 117
Sandeep K Nair Avatar answered Oct 04 '22 14:10

Sandeep K Nair


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.

like image 44
Hirak Avatar answered Oct 04 '22 14:10

Hirak