Accept files dropped on the document

The DragDropSource extension can be configured with the DragDropSourceOptions object. 

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { DragDropSource } from 'filepond/extensions/drag-drop-source.js';

defineFilePond({
    locale,
    extensions: [
        // Add the DragDropSource extension and configure with DragDropSourceOptions object
        DragDropSource
    ]
})

Only accept file drops on a specific element

This only accepts the dropped file(s) when they’re dropped on a specific element.

<p
  class="drop-area"
  style="width: 200px; height: 100px; border: 1px solid silver"
>
  Drop files here
</p>

<file-pond></file-pond>

<script type="module">
  import { defineFilePond } from "filepond";
  import { locale } from "filepond/locales/en-gb.js";
  import { DragDropSource } from "filepond/extensions/drag-drop-source.js";

  defineFilePond({
    // The locale to use
    locale,

    // The extensions to load
    extensions: [
      // Add the DragDropSource extension
      [
        DragDropSource,
        {
          // Filter drop targets
          shouldHandleDrop: (e) => {
            return e.target.matches(".drop-area");
          },
        },
      ],
    ],
  });
</script>