Drag and Drop — File Upload with Visual Drop Zone

Drag-and-drop file upload provides a more natural interaction for bulk uploads — dropping multiple images onto the browser window feels faster and more intuitive than clicking “Browse” multiple times. The HTML5 Drag and Drop API exposes four events on the drop target: dragenter, dragover, dragleave, and drop. React wraps these as onDragEnter, onDragOver, onDragLeave, and onDrop. The critical detail: you must call e.preventDefault() on dragover to allow dropping (browsers block drops by default).

DropZone Component #

import { useState, useRef, useCallback } from "react";

const ACCEPTED_TYPES = ["image/jpeg", "image/png", "image/webp"];
const MAX_SIZE_BYTES = 5 * 1024 * 1024;

function DropZone({ onFiles, multiple = false, accept = ACCEPTED_TYPES }) {
    const [isDraggingOver, setIsDraggingOver] = useState(false);
    const [errors, setErrors]                 = useState([]);
    const inputRef                            = useRef(null);
    const dragCounter                         = useRef(0);   // tracks nested drag events

    function validateFiles(fileList) {
        const valid   = [];
        const invalid = [];

        Array.from(fileList).forEach((file) => {
            if (!accept.includes(file.type)) {
                invalid.push(`${file.name}: unsupported format`);
            } else if (file.size > MAX_SIZE_BYTES) {
                invalid.push(`${file.name}: too large (max 5 MB)`);
            } else {
                valid.push(file);
            }
        });

        return { valid, invalid };
    }

    const handleDragEnter = useCallback((e) => {
        e.preventDefault();
        dragCounter.current += 1;   // increment counter (handles nested children)
        if (e.dataTransfer.items?.length > 0) {
            setIsDraggingOver(true);
        }
    }, []);

    const handleDragOver = useCallback((e) => {
        e.preventDefault();   // ← required to allow dropping
        e.dataTransfer.dropEffect = "copy";
    }, []);

    const handleDragLeave = useCallback((e) => {
        e.preventDefault();
        dragCounter.current -= 1;
        if (dragCounter.current === 0) {
            setIsDraggingOver(false);   // only hide when fully left the zone
        }
    }, []);

    const handleDrop = useCallback((e) => {
        e.preventDefault();
        dragCounter.current = 0;
        setIsDraggingOver(false);

        const { valid, invalid } = validateFiles(e.dataTransfer.files);
        setErrors(invalid);

        if (valid.length > 0) {
            onFiles(multiple ? valid : [valid[0]]);
        }
    }, [onFiles, multiple, accept]);

    const handleInputChange = useCallback((e) => {
        const { valid, invalid } = validateFiles(e.target.files);
        setErrors(invalid);
        if (valid.length > 0) {
            onFiles(multiple ? valid : [valid[0]]);
        }
    }, [onFiles, multiple]);

    return (
        <div>
            <div
                onDragEnter={handleDragEnter}
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onDrop={handleDrop}
                onClick={() => inputRef.current?.click()}
                className={`border-2 border-dashed rounded-xl p-8 text-center
                            cursor-pointer transition-colors
                            ${isDraggingOver
                                ? "border-blue-500 bg-blue-50"
                                : "border-gray-300 hover:border-gray-400 bg-gray-50"
                            }`}
            >
                {isDraggingOver ? (
                    <p className="text-blue-600 font-medium">Drop to upload</p>
                ) : (
                    <div>
                        <p className="text-gray-600 mb-1">
                            Drag &amp; drop {multiple ? "images" : "an image"} here
                        </p>
                        <p className="text-sm text-gray-400">or click to browse</p>
                        <p className="text-xs text-gray-400 mt-2">
                            JPEG, PNG, WebP — max 5 MB each
                        </p>
                    </div>
                )}
            </div>

            <input
                ref={inputRef}
                type="file"
                accept={accept.join(",")}
                multiple={multiple}
                onChange={handleInputChange}
                className="sr-only"
            />

            {errors.length > 0 && (
                <ul className="mt-2 space-y-1">
                    {errors.map((err, i) => (
                        <li key={i} className="text-red-500 text-sm">{err}</li>
                    ))}
                </ul>
            )}
        </div>
    );
}

Common Mistakes #

Mistake 1 — Not calling preventDefault on dragover (drop is blocked) #

❌ Wrong — drop event never fires:

onDragOver={(e) => { /* no preventDefault */ }}
// Browser won't fire onDrop — it blocks drops on non-configured elements

✅ Correct:

onDragOver={(e) => { e.preventDefault(); }}   // ✓ allows drop

Mistake 2 — No dragCounter (flickers on child element drag) #

❌ Wrong — isDraggingOver flickers off and on when hovering over children.

✅ Correct — use a ref counter that increments on enter and decrements on leave.

Quick Reference #