useDropZone

Package

Share - Core

Category

Elements

Description

create a zone where files can be dropped

Create a zone where files can be dropped.

Demo

Drop files on to drop zones

PNG

General DropZone

isOverDropZone: false

Image DropZone

isOverDropZone: false

Usage

<script setup lang="ts">
import { useDropZone } from '@hungpvq/share-code';

const dropZoneRef = ref<HTMLDivElement>();

function onDrop(files: File[] | null) {
  // called when files are dropped on zone
}

const { isOverDropZone } = useDropZone(dropZoneRef, {
  onDrop,
  // specify the types of data to be received.
  dataTypes: ['image/jpeg'],
});
</script>

<template>
  <div ref="dropZoneRef">Drop files here</div>
</template>