clipboard.ts

const setUpClipboardHandler = (el) => {
  let hasFiles = false;
  let counter = 0;

  const upload = (fileOrFiles) => {
    let fileInput = null;

    if (el.dataset.chunkId) {
      fileInput = document.querySelector(`form[data-chunk-id="${el.dataset.chunkId}"] input[type="file"]`);
    } else {
      const els = document.querySelectorAll(`form[data-type="upload-file"] input[type="file"]`);
      fileInput = els[els.length - 1];
    }

    if (fileInput) {
      fileInput.files = fileOrFiles;

      // Note: this is definitely needed for Chrome
      //       not needed in Safari
      //       not tested in FF
      var event = document.createEvent('UIEvents');
      (event as any).initUIEvent('change', true, true);
      fileInput.dispatchEvent(event);

      return true;
    }

    return false;
  }

  let handleClick = null as any;

  if (typeof el.dataset.pasteButton !== 'undefined') {
    handleClick = (e) => {
      navigator.permissions.query({ name: 'clipboard-read' }).then((auth) => {
        if (auth.state !== 'denied') {
          const clipboard = navigator.clipboard;
          (clipboard as any).read().then(data => {
            let dataTransfer = new ClipboardEvent('').clipboardData || new DataTransfer();

            const properData = data.filter(item => item.types.some((type) => type.startsWith('image/')));
            let processedDataCount = 0;

            properData.forEach(item => {
              let file_type = item.types.find((type) => type.startsWith('image/'));
              item.getType(file_type).then((blob) => {
                const file = new File([blob], 'clipboard', { type: file_type });
                dataTransfer.items.add(file)
                processedDataCount++;
              });
            })

            let intervalId;
            let readCounts = 0;
            intervalId = setInterval(() => {
              if (processedDataCount == properData.length || readCounts > 10) {
                upload(dataTransfer.files);
                clearInterval(intervalId);
                return;
              }
              readCounts++;
            }, 500);

            if (dataTransfer.files.length > 0) {
              upload(dataTransfer.files);
            }
          }).catch(e => console.error(e));
        }
      });
    };

    el.addEventListener('click', handleClick);
  }

  const handlePaste = (e) => {
    const clipboardData = (e.clipboardData || (window as any).clipboardData);

    const files = clipboardData.files;
    if (clipboardData.files.length == 0) {
      return;
    }

    if (upload(files)) {
      e.preventDefault();
      e.stopPropagation();
    }
  };

  el.addEventListener('paste', handlePaste);

  return () => {
    if (handleClick) {
      el.removeEventListener('click', handleClick);
    }
    el.removeEventListener('paste', handlePaste);
  }
}