use-drop-zone

Test a file against accept-attribute style patterns.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { matchesAccept, useDropZone } from "@vizejs/composable/use-drop-zone";

Try it

Accept dropped images

Turn an element into a drop target that filters file types.

Open the interactive example

What to observe: Drag image files onto the area: it highlights while files are over it and lists their names after the drop. Other file types are ignored.

accept takes MIME patterns or a function. Provide a file input as well for keyboard and screen-reader users.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { ref } from "vue";
import { useDropZone } from "@vizejs/composable/use-drop-zone";

const zone = ref<HTMLElement | null>(null);
const { isOverDropZone, files } = useDropZone(zone, { accept: ["image/*"], multiple: true });
</script>

<template>
  <div class="composable-example">
    <p>Accept images dropped onto an area and list them.</p>
    <div
      ref="zone"
      role="region"
      aria-label="Image drop area"
      :style="{
        border: '2px dashed',
        padding: '16px',
        background: isOverDropZone ? '#42b88333' : 'transparent',
      }"
    >
      {{ isOverDropZone ? "Release to add the images" : "Drop images here" }}
    </div>
    <output aria-live="polite">{{
      files?.length ? `Added: ${files.map((file) => file.name).join(", ")}` : "No images yet."
    }}</output>
  </div>
</template>

Runtime contract

API

matchesAccept

Test a file against accept-attribute style patterns. Supports exact MIME types, wildcard subtypes ("image/*"), extensions (".png", case-insensitive), and "*". An empty pattern list accepts everything. An empty name (the file is still being dragged) makes extension patterns match provisionally.

function matchesAccept(accept: readonly string[], file: DropZoneFileInfo): boolean

useDropZone

Headless drop-zone logic for any element. Tracks whether a drag is over the target (a nesting counter keeps dragleave from child elements from flickering the state), decides acceptance from the dragged MIME types while dragging, and filters the dropped files by accept (including extension patterns) and multiple. Rejected drags show the "none" drop effect. Rendering is entirely up to the caller. Listeners follow the reactive target and are removed when the owning reactive scope stops. Server rendering: no listener is attached; all state is empty/false.

function useDropZone( target: MaybeRefOrGetter<EventTarget | null | undefined>, options: UseDropZoneOptions = {}, ): DropZoneControls

const zone = useTemplateRef<HTMLElement>("zone");
const { isOverDropZone, files } = useDropZone(zone, { accept: ["image/*"] });

Types

DataTransferItemLike

One entry of DataTransfer.items.

DataTransferLike

Minimal DataTransfer consumed by useDropZone.

DropZoneFileInfo

File name and MIME type used for acceptance checks.

UseDropZoneOptions

Options for useDropZone.

DropZoneControls

Reactive state returned by useDropZone.