<script>
  UPLOADCARE_PUBLIC_KEY = "demopublickey";
</script>
<script charset="utf-8" src="//ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
<p>
  <h2>Upload image from clipboard</h2>
  <ul>
    <li>Take a screenshot</li>
    <li>Open the widget</li>
    <li>Press <code>CMD+V</code> (Mac) or <code>CTRL+V</code> (Windows)</li>
  </ul>
</p>
<p>
  <input type="hidden" role="uploadcare-uploader" data-tabs="file" data-crop="1:1" data-images-only >  
</p>
body {
  font-family: sans-serif;
  line-height: 1.5;
}

code {
  background: #badaaa;
  border-radius: 5px;
  padding: .2em .5em;
}

const widget = uploadcare.Widget("[role=uploadcare-uploader]");
widget.onDialogOpen(dialog => {
  function uploadFromClipboard(e) {
    let data = e.clipboardData;
    if (!!data && !!data.items.length) {
      // check if clipboard data is image
      if (data.items[0].type.indexOf('image') != 0) {
        alert('No image in the clipboard');
        return;
      }
      let blob = e.clipboardData.items[0].getAsFile();
      dialog.addFiles('object', [blob]);
    };
  };
  window.addEventListener('paste', uploadFromClipboard)
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.