typescript 71 lines · 9 steps

A drag-and-drop file upload zone in React

A React component that accepts dropped files, validates type and size, and tracks nested drag events with a ref counter.

Explained by highlit

React Intermediate drag-and-drop file-validation controlled-state event-handling refs

1import { useCallback, useRef, useState } from "react";
2 
3type UploadZoneProps = {
accept?: string[];
maxSizeBytes?: number;
onFiles: (files: File[]) => void;
7};
8 
9export function UploadZone({ accept, maxSizeBytes = 10 * 1024 * 1024, onFiles }: UploadZoneProps) {
const [dragging, setDragging] = useState(false);
const [error, setError] = useState<string | null>(null);
const dragDepth = useRef(0);
13 
const validate = useCallback(
  (files: File[]) => {
    for (const file of files) {
      if (accept && !accept.some((type) => file.type === type || file.name.endsWith(type))) {
        return `\"${file.name}\" is not an accepted file type`;
      }
      if (file.size > maxSizeBytes) {
        return `\"${file.name}\" exceeds ${Math.round(maxSizeBytes / 1024 / 1024)}MB`;
      }
    }
    return null;
  },
  [accept, maxSizeBytes],
);
28 
const handleDrop = useCallback(
  (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    dragDepth.current = 0;
    setDragging(false);
34 
    const files = Array.from(event.dataTransfer.files);
    if (files.length === 0) return;
37 
    const validationError = validate(files);
    if (validationError) {
      setError(validationError);
      return;
    }
    setError(null);
    onFiles(files);
  },
  [validate, onFiles],
);
48 
return (
  <div
    onDragEnter={(e) => {
      e.preventDefault();
      dragDepth.current += 1;
      setDragging(true);
    }}
    onDragOver={(e) => e.preventDefault()}
    onDragLeave={(e) => {
      e.preventDefault();
      dragDepth.current -= 1;
      if (dragDepth.current === 0) setDragging(false);
    }}
    onDrop={handleDrop}
    className={dragging ? "dropzone dropzone--active" : "dropzone"}
    role="button"
    tabIndex={0}
  >
    <p>{dragging ? "Release to upload" : "Drag files here to upload"}</p>
    {error && <p className="dropzone__error">{error}</p>}
  </div>
);
71}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1A ref counter cleanly solves the flickering caused by dragenter/dragleave firing on nested child elements.
2Validating files before invoking the callback keeps invalid input from ever reaching the parent.
3Memoizing handlers with useCallback keeps their identity stable across renders while capturing the right dependencies.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';