uploadcare / uploadcare-widget

Uploadcare Widget, an ultimate tool for HTML5 file upload supporting multiple file upload, drag&drop, validation by file size/file extension/MIME file type, progress bar for file uploads, image preview.
https://uploadcare.com/products/file_uploader/
BSD 2-Clause "Simplified" License
227 stars 102 forks source link

Paste image from the clipboard #732

Open rsedykh opened 4 years ago

rsedykh commented 4 years ago

Summary

I want to open the uploader and just paste an image from the clipboard.

Basic example

They all are the same, take twitter.com for example.

Motivation

Saves time and adds convenience.

optlsnd commented 3 years ago

@rsedykh I solved it this way

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);
});

https://codepen.io/optlsnd/pen/KKMOOVb