ClipboardSource

Accept files from paste events.

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { ClipboardSource } from 'filepond/extensions/clipboard-source.js';

defineFilePond({
    locale,
    extensions: [
        // Add the ClipboardSource extension
        ClipboardSource
    ]
})

Configuration

The ClipboardSource extension accepts an option object of type ClipboardSourceOptions which defines the properties below.

shouldHandlePaste

Receives ClipboardEvent can then determine if it should be handled. Defaults to () => true

shouldHandlePaste: (e: ClipboardEvent) => boolean

Only accept paste when element is target

This only accepts the pasted file(s) if the <file-pond> element or one of its children is the current active element, useful when there’s more than one <file-pond> element on the page.

import { defineFilePond } from "filepond";
import { locale } from "filepond/locales/en-gb.js";
import { ClipboardSource } from "filepond/extensions/clipboard-source.js";

defineFilePond({
  // The locale to use
  locale,

  // The extensions to load
  extensions: [
    // Add the ClipboardSource extension
    ClipboardSource,
  ],
});

elements.forEach((element) => {
  // Update ClipboardSource extension options
  element.ClipboardSource = {
    // We test the paste event target against the element
    shouldHandlePaste: (e) => {
      // If has target, target must be either the file-pond element or a child
      if (e.target) {
        return e.target === element || element.contains(e.target);
      }

      // Don't accept paste for this element
      return false;
    },
  };
});

Only accept paste when hovering over element

This only accepts the pasted file(s) if the user is hovering over the <file-pond> element, useful when there’s more than one <file-pond> element on the page.

import { defineFilePond } from "filepond";
import { locale } from "filepond/locales/en-gb.js";
import { ClipboardSource } from "filepond/extensions/clipboard-source.js";

// We keep track of the mouse position
window.addEventListener("mousemove", (e) => {
  mouse = {
    x: e.pageX,
    y: e.pageY,
  };
});

defineFilePond({
  // The locale to use
  locale,

  // The extensions to load
  extensions: [
    // Add the ClipboardSource extension
    ClipboardSource,
  ],
});

elements.forEach((element) => {
  // Update ClipboardSource extension options
  element.ClipboardSource = {
    // We test the paste event position against mouse position
    shouldHandlePaste: (e) => {
      // When no mouse we fallback to testing if the element is the active element
      if (!mouse) {
        return (
          document.activeElement === element ||
          element.contains(document.activeElement)
        );
      }

      // Test if mouse position is inside element client rect
      const rect = element.getBoundingClientRect();
      if (
        mouse.x >= rect.left &&
        mouse.x <= rect.right &&
        mouse.y >= rect.top &&
        mouse.y <= rect.bottom
      ) {
        return true;
      }

      // don't accept paste for this element
      return false;
    },
  };
});