React Academy · Lesson

Drag & Drop File Upload UI

Build a drag-and-drop zone with onDragOver/onDrop events and visual feedback.

Drag & Drop File Upload UI is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will build a drag-and-drop file upload zone in React using native drag events and visual feedback to guide users.

Drag Event Overview

The browser fires drag events when files are dragged over elements. The key events are: `dragover` (file is over the element), `dragleave` (file leaves the element), and `drop` (file is released).

Preventing Default Behaviour

By default, dropping a file into the browser navigates to it. Call `e.preventDefault()` in both `onDragOver` and `onDrop` to prevent this.

const handleDragOver = (e) => {
  e.preventDefault();
};
const handleDrop = (e) => {
  e.preventDefault();
  const files = Array.from(e.dataTransfer.files);
  // process files
};

Visual Active State

Track whether a file is being dragged over the zone with a boolean state. Toggle a CSS class to give users visual feedback (e.g. highlighted border).

const [isDragging, setIsDragging] = useState(false);

<div
  className={isDragging ? 'zone active' : 'zone'}
  onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
  onDragLeave={() => setIsDragging(false)}
  onDrop={handleDrop}
>

Reading Dropped Files

Dropped files are in `e.dataTransfer.files` — a FileList. Convert it to an array and process the files.

const handleDrop = (e) => {
  e.preventDefault();
  setIsDragging(false);
  const files = Array.from(e.dataTransfer.files);
  setSelectedFiles(files);
};

Combining Click-to-Browse

Make the drop zone also clickable by rendering a hidden file input and programmatically clicking it when the zone is clicked.

const inputRef = useRef();

<div onClick={() => inputRef.current.click()} ...>
  Drop files here or click to browse
</div>
<input
  ref={inputRef}
  type="file"
  multiple
  hidden
  onChange={(e) => setSelectedFiles(Array.from(e.target.files))}
/>

Showing File Previews

Map over selected files to display their names and sizes. For image files, generate preview URLs with URL.createObjectURL and revoke them in a cleanup effect.

Removing Files Before Upload

Let users remove files before upload by filtering the selected files array. Update the state with the filtered array.

const removeFile = (index) =>
  setSelectedFiles(files => files.filter((_, i) => i !== index));

dragenter vs dragover

Use `dragenter` to detect when dragging first enters the zone and `dragover` to keep the active state alive while hovering. Use a counter for nested children: increment on dragenter, decrement on dragleave, and reset on drop.

Third-Party Libraries

For production drop zones, consider **react-dropzone** — it handles browser quirks, ARIA attributes, file type filtering, and multiple upload modes out of the box.

import { useDropzone } from 'react-dropzone';
const { getRootProps, getInputProps, isDragActive } = useDropzone({
  onDrop: acceptedFiles => setFiles(acceptedFiles),
  accept: { 'image/*': [] },
});

Quick Check

Why must you call e.preventDefault() in the onDragOver handler?

Recap

Build a drop zone with onDragOver, onDragLeave, and onDrop events. Always e.preventDefault() on dragover and drop. Track isDragging state for visual feedback. Combine with a hidden file input for click-to-browse.

Up Next

Next lesson: **Uploading Files to a Backend API** — you will use FormData and fetch to POST files and track upload progress.

Frequently asked questions

Is the “Drag & Drop File Upload UI” lesson free?

Yes — the full text of “Drag & Drop File Upload UI” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Drag & Drop File Upload UI”?

Build a drag-and-drop zone with onDragOver/onDrop events and visual feedback. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Drag & Drop File Upload UI” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy