How to upload an image through the clipboard (copy and paste)?

Question

I was taking a look at the functionality of the site Imgur. When you make a printscreen or even copy an image (not the link, but the image, which is an option that is available in most current browsers) and then paste on the page, is uploaded the image that was saved in the clipboard (Clipboard).

I have no idea how Javascript can access that part of the memory where "Copy".

I would like a simple demonstration of how I can do to transfer the image from memory and upload it. I would also like to know if it is possible to transfer the contents of the clipboard (CTRL+C) to a Javascript Blob.

Answer 1

When something is pasted on a page, the js fires an event in function onpaste.

When we paste an image, the js through function onpaste returns an object with the interface File (Only in the case of binaries, obvious). With this object, we can use the method getAsFile() which we will use with the class FileReader.

To read this content, we can use the method readAsDataURL class Filereader. With that we can capture the code base64 image, and that’s basically what the site code does. It basically sends a base64, instead of a file, to the server.

Follow a very simple example.

var reader = new FileReader();

reader.onload = function(result) {
  let img = document.createElement("img");
  img.src = result.target.result;
  document.body.appendChild(img);
}

document.querySelector("input").onpaste = function(event){
  
  let items = event.clipboardData.items;

  for (itemIndex in items) {
      let item = items[itemIndex];

      if (item.kind == 'file') {
        reader.readAsDataURL(item.getAsFile());
      }
  }
}

<input type="text" placeholder="Cole sua imagem aqui" />

Errata: Why Javascript Needs a for to find the image?

The js needs this for because when you copy an image from the internet, it’s launching an action on onpaste with two Datatransferetes.

The first item is a code html with an element <img>. In this element we receive a code base64 or the image URL. That’s why you’re getting a text/html (You can also receive one text/plain).

The second is already an image itself. It can be captured through the method DataTransferItem.getAsFile()