# code-snippets/3.9.6/js/components/Import/FromFileUpload/hooks/useDragAndDrop.ts

Code Snippets, version 3.9.6. 37 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.9.6/code/js/components/Import/FromFileUpload/hooks/useDragAndDrop.ts
- Raw: https://pluginprobe.com/plugins/code-snippets/3.9.6/raw/js/components/Import/FromFileUpload/hooks/useDragAndDrop.ts
- Modified: 2026-01-16T19:28:10+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/3.9.6/code/js/components/Import/FromFileUpload/hooks/useDragAndDrop.ts#L10-L20`.

```typescript
import { useState } from 'react'

interface UseDragAndDropProps {
	onFilesDrop: (files: FileList) => void
}

export const useDragAndDrop = ({ onFilesDrop }: UseDragAndDropProps) => {
	const [dragOver, setDragOver] = useState(false)

	const handleDragOver = (e: React.DragEvent) => {
		e.preventDefault()
		setDragOver(true)
	}

	const handleDragLeave = (e: React.DragEvent) => {
		e.preventDefault()
		setDragOver(false)
	}

	const handleDrop = (e: React.DragEvent) => {
		e.preventDefault()
		setDragOver(false)
		
		const files = e.dataTransfer.files
		if (files.length > 0) {
			onFilesDrop(files)
		}
	}

	return {
		dragOver,
		handleDragOver,
		handleDragLeave,
		handleDrop
	}
}

```