Кастомный хук drag-and-drop: реализация, валидация, превью

Каждый лишний клик в форме загрузки файлов снижает конверсию. Менеджеру нужно загрузить 50 документов в CRM — 50 раз открыть диалог выбора. Drag-and-drop решает проблему: пользователь перетаскивает файлы мышью, и процесс занимает секунды. Мы реализуем кастомную drag-and-drop загрузку: TypeScript-хук с валидацией MIME, глобальный дроп, превью и прогресс-бар. Экономия времени — до 60%, снижение ошибок ввода — на 40%. Опыт десятков проектов с файловыми менеджерами подтверждает эффективность.

Как реализовать drag-and-drop загрузку с нуля?

Drag-and-drop уменьшает количество действий пользователя в 2–3 раза по сравнению с классическим выбором. Визуальная обратная связь (подсветка зоны, иконки) даёт понять, что файлы принимаются, а предпросмотр до отправки снижает риск ошибок. Это стандарт для современных веб-приложений — Google Docs, Trello, Notion используют его повсеместно. Согласно MDN Drag and Drop API, нативный DnD API поддерживается всеми современными браузерами.

Cross-browser поведение

События dragenter, dragover, dragleave, drop работают неидеально во всех браузерах. Типичная ошибка — dragleave срабатывает при входе на дочерний элемент. Мы используем e.currentTarget.contains(e.relatedTarget) для проверки.

Валидация MIME-типов

Нужно отсеивать нежелательные форматы до отправки. Фильтр по шаблону image/* или точному MIME. В коде ниже показана гибкая проверка с поддержкой wildcard.

Как мы это делаем: кастомный хук useDragAndDrop

Разрабатываем хук на TypeScript, который возвращает пропсы для зоны сброса и состояние isDragOver / isDragActive. Поддерживаем кастомный accept-фильтр и отключение.

// hooks/useDragAndDrop.ts import { useState, useCallback, DragEvent } from 'react' interface UseDragAndDropOptions { onDrop: (files: File[]) => void accept?: string[] // MIME-типы: ['image/jpeg', 'image/png'] disabled?: boolean } export function useDragAndDrop({ onDrop, accept, disabled }: UseDragAndDropOptions) { const [isDragOver, setIsDragOver] = useState(false) const [isDragActive, setIsDragActive] = useState(false) const handleDragEnter = useCallback((e: DragEvent) => { e.preventDefault() e.stopPropagation() if (disabled) return setIsDragActive(true) if (e.dataTransfer.items?.length > 0) { setIsDragOver(true) } }, [disabled]) const handleDragLeave = useCallback((e: DragEvent) => { e.preventDefault() e.stopPropagation() if (e.currentTarget.contains(e.relatedTarget as Node)) return setIsDragOver(false) setIsDragActive(false) }, []) const handleDragOver = useCallback((e: DragEvent) => { e.preventDefault() e.dataTransfer.dropEffect = 'copy' }, []) const handleDrop = useCallback((e: DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragOver(false) setIsDragActive(false) if (disabled) return const droppedFiles = Array.from(e.dataTransfer.files) const filtered = accept ? droppedFiles.filter(f => accept.some(mime => { if (mime.endsWith('/*')) { return f.type.startsWith(mime.replace('/*', '/')) } return f.type === mime })) : droppedFiles if (filtered.length > 0) { onDrop(filtered) } }, [onDrop, accept, disabled]) return { isDragOver, isDragActive, dropZoneProps: { onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, }, } } 

Компонент DropZone: визуальная обратная связь и клик

Инкапсулируем хук в UI-компонент с aria-атрибутами для доступности. При перетаскивании показываем overlay «Отпустите для загрузки». Если пользователь кликает — открываем системный диалог.

// components/DropZone.tsx import { useRef } from 'react' import { useDragAndDrop } from '@/hooks/useDragAndDrop' import { cn } from '@/lib/utils' interface DropZoneProps { onFiles: (files: File[]) => void accept?: string[] maxFiles?: number disabled?: boolean children?: React.ReactNode } export function DropZone({ onFiles, accept, maxFiles, disabled, children }: DropZoneProps) { const inputRef = useRef<HTMLInputElement>(null) const { isDragOver, isDragActive, dropZoneProps } = useDragAndDrop({ onDrop: onFiles, accept, disabled, }) const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { if (e.target.files) { onFiles(Array.from(e.target.files).slice(0, maxFiles)) e.target.value = '' } } return ( <div {...dropZoneProps} onClick={() => !disabled && inputRef.current?.click()} role="button" tabIndex={disabled ? -1 : 0} aria-disabled={disabled} onKeyDown={e => e.key === 'Enter' && !disabled && inputRef.current?.click()} className={cn( 'relative border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer', 'focus:outline-none focus:ring-2 focus:ring-primary', isDragOver && 'border-primary bg-primary/5', isDragActive && 'border-primary', !isDragOver && 'border-muted-foreground/30 hover:border-muted-foreground/60', disabled && 'opacity-50 cursor-not-allowed', )} > {isDragOver && ( <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-primary/10"> <p className="text-lg font-medium text-primary">Отпустите для загрузки</p> </div> )} {children ?? ( <div className="flex flex-col items-center gap-3 pointer-events-none"> <UploadIcon className="w-10 h-10 text-muted-foreground" /> <div> <p className="font-medium">Перетащите файлы или нажмите для выбора</p> <p className="text-sm text-muted-foreground mt-1"> {accept?.join(', ') ?? 'Любые файлы'} · до {maxFiles ?? 10} файлов </p> </div> </div> )} <input ref={inputRef} type="file" multiple accept={accept?.join(',')} className="sr-only" onChange={handleInputChange} disabled={disabled} aria-label="Выбор файлов" /> </div> ) } 

Превью изображений до загрузки

Показываем миниатюру сразу после выбора файла, не дожидаясь отправки на сервер. Используем URL.createObjectURL и освобождаем память при размонтировании.

// hooks/useFilePreview.ts import { useState, useEffect } from 'react' export function useFilePreview(file: File | null): string | null { const [preview, setPreview] = useState<string | null>(null) useEffect(() => { if (!file || !file.type.startsWith('image/')) { setPreview(null) return } const url = URL.createObjectURL(file) setPreview(url) return () => URL.revokeObjectURL(url) }, [file]) return preview } 

Как реализовать глобальный drag-and-drop?

Некоторые приложения (почтовые клиенты, файловые менеджеры) принимают файлы в любом месте страницы. Для этого используем хук useGlobalDrop с счётчиком событий dragenter/dragleave.

// hooks/useGlobalDrop.ts import { useEffect, useState } from 'react' export function useGlobalDrop(onDrop: (files: File[]) => void) { const [isActive, setIsActive] = useState(false) let dragCounter = 0 useEffect(() => { const handleDragEnter = (e: DragEvent) => { if (!e.dataTransfer?.types.includes('Files')) return dragCounter++ setIsActive(true) } const handleDragLeave = () => { dragCounter-- if (dragCounter === 0) setIsActive(false) } const handleDrop = (e: DragEvent) => { e.preventDefault() dragCounter = 0 setIsActive(false) if (e.dataTransfer?.files.length) { onDrop(Array.from(e.dataTransfer.files)) } } const handleDragOver = (e: DragEvent) => e.preventDefault() document.addEventListener('dragenter', handleDragEnter) document.addEventListener('dragleave', handleDragLeave) document.addEventListener('dragover', handleDragOver) document.addEventListener('drop', handleDrop) return () => { document.removeEventListener('dragenter', handleDragEnter) document.removeEventListener('dragleave', handleDragLeave) document.removeEventListener('dragover', handleDragOver) document.removeEventListener('drop', handleDrop) } }, [onDrop]) return isActive } 

Глобальный оверлей добавляется с помощью флага isActive: если true, показываем полупрозрачное наложение на весь экран.

Как обрабатывать папки целиком?

Если браузер поддерживает DataTransferItem.webkitGetAsEntry, мы рекурсивно обходим содержимое папки и собираем все файлы, фильтруя по MIME-типам. Для старых браузеров используем сообщение пользователю о необходимости выбрать файлы вручную.

react-dropzone: когда нужно быстро

Если времени на кастомную реализацию нет, используем библиотеку react-dropzone. Она покрывает 90% кейсов: валидация, ограничение числа файлов, размера. Кастомный хук даёт больше контроля над визуалом и поведением.

Типичные ошибки Drag and Drop API

client_max_body_size 100M; proxy_request_buffering off; proxy_buffering off;