useDropZone

v0.0.14testeddemo

Create a drag-and-drop file drop zone on a target element or document.

Example

const dropZone = useTemplateRef<HTMLElement>('dropZone');
const { isOverDropZone, files } = useDropZone(dropZone, {
  dataTypes: ['image/png'],
  onDrop: (files) => console.log(files),
});

Demo

Loading demo…

Signature

export function useDropZone(
  target: MaybeComputedElementRef | MaybeRefOrGetter<Document | null | undefined>,
  options: UseDropZoneOptions | UseDropZoneOptions['onDrop'] ={ ... }

Parameters

Parameter	Type	Default	Description
`target`	`MaybeComputedElementRef \| MaybeRefOrGetter<Document \| null \| undefined>`	—	The element (or document) acting as the drop zone.
`options`?	`UseDropZoneOptions \| UseDropZoneOptions['onDrop']`	`{}`	Drop zone options, or a shorthand `onDrop` callback.

Returns

UseDropZoneReturnThe reactive drop zone state.

Property	Type	Default	Description
`isOverDropZone`	`ShallowRef<boolean>`	—	Whether a valid drag is currently hovering over the target.
`files`	`ShallowRef<File[] \| null>`	—	The dropped files, or `null` when nothing has been dropped yet.
`isSupported`	`ComputedRef<boolean>`	—	Whether the Drag and Drop API is available in the current environment.