Open-code aq-ui React hook for Use File Drop.
aq-uipnpm dlx aq-ui@alpha add use-file-dropImport the parts you need, then jump to an export for its contract.
"use client"
import { useFileDrop } from "@/hooks/use-file-drop"
const result = useFileDrop()Type contract for FileDropBind.
interface FileDropBind<T extends HTMLElement>| Name | Type |
|---|---|
isDragging | boolean |
files | File[] |
rejections | FileDropRejection[] |
reset | () => void |
rootProps | { onDragEnter: React.DragEventHandler<T> onDragOver: React.DragEventHandler<T> onDragLeave: React.DragEventHandler<T> onDrop: React.DragEventHandler<T> } |
Type contract for FileDropRejection.
interface FileDropRejection| Name | Type |
|---|---|
file | File |
reason | "type" | "size" | "multiple" |
Open-code aq-ui React hook for Use File Drop.
function useFileDrop<T extends HTMLElement>({ accept = EMPTY_ACCEPT, multiple = true, maxSize = Number.POSITIVE_INFINITY, disabled = false, onDrop, onReject, }: UseFileDropOptions = {}): FileDropBind<T>FileDropBind<T>| Name | Type | Default |
|---|---|---|
options? | UseFileDropOptions | {} |
Type contract for UseFileDropOptions.
interface UseFileDropOptions| Name | Type | Default |
|---|---|---|
accept? | string[] | EMPTY_ACCEPT |
multiple? | boolean | true |
maxSize? | number | Number.POSITIVE_INFINITY |
disabled? | boolean | false |
onDrop? | (files: File[]) => void | — |
onReject? | (rejections: FileDropRejection[]) => void | — |
use-stable-callback