Building a Drag-and-Drop File Uploader

Published: November 20, 2025

The Torrent Tracker Analyzer starts with a seamless file upload experience. Here’s how we built a **drag-and-drop uploader** that’s accessible, fast, and user-friendly.

Core Requirements

Click to upload or drag & drop
Instant feedback with file name and size
Keyboard accessible (Enter/Space)
Only accept .torrent files
Works on mobile and desktop

Drag & Drop API

We listen to dragover, dragleave, and drop events. preventDefault() is critical to allow dropping.

Visual Feedback

A .drag-over class changes border and background during drag.

Keyboard Support

Pressing Enter or Space triggers the hidden file input.

Validation

We check file.name.endsWith('.torrent') and show an alert if invalid.

Accessibility (a11y)

aria-label on drop zone
Focus outline on keyboard navigation
Screen reader announces upload

FAQ

Why not use <input type="file" /> directly?

Hidden inputs can’t be styled. A custom zone offers better UX.

Does it work on iOS?

Yes. Tap to open picker; drag & drop works in Safari 14+.

Try the uploader: Go to Analyzer