Drop File Upload (Multer)
A developer-ready Express component for secure drag-and-drop file uploads using Multer. Supports single and multiple uploads, file validation, metadata responses, and progress tracking.
Overview
A drag-and-drop friendly file upload system for Express using Multer. It supports both single and multiple file uploads with automatic file validation, storage, and clean JSON responses. Ideal for Next.js or React-based drag-drop frontends.
Installation
What This Does
Installs a full-featured file upload system (single + multiple) compatible with drag-and-drop interfaces.
Files & Folders Created
| File / Path | Description |
|---|---|
| /src/config/storage.js | Configures storage location and filename logic. |
| /src/services/uploadService.js | Handles Multer setup, file validation, and metadata responses. |
| /src/routes/upload.js | Provides upload and listing API routes. |
| /server.js.example | Example Express integration with static file serving. |
| /.env.example | Configuration for upload directory, limits, and file types. |
Files to be modified
| File / Path | Description |
|---|---|
| server.js | Mounts upload routes under /api. |
| .env | Adds upload configuration variables. |
Configuration
# File Upload Configuration PORT=3001 UPLOAD_DEST=uploads MAX_FILE_SIZE=5242880 ALLOWED_FILE_TYPES=image/jpeg,image/png,application/pdf STORAGE_DRIVER=local
Frontend Integration
This backend pairs perfectly with drag-and-drop React components (like Dropzone or your own UI). Users can drop files which will be sent via `/api/upload/single` or `/api/upload/multiple`. The backend returns structured file metadata and URLs for previews.
Uploads a single file from the drag-and-drop area.
Uploads multiple files (up to 10) via drag-and-drop.
Lists all uploaded files with metadata (for frontend preview grids).
Example
1// Example: React / Next.js frontend integration
2import { useState } from 'react';
3
4export default function DragDropUploader() {
5 const [files, setFiles] = useState([]);
6 const [message, setMessage] = useState('');
7
8 const handleDrop = async (event) => {
9 event.preventDefault();
10 const formData = new FormData();
11 for (const file of event.dataTransfer.files) {
12 formData.append('files', file);
13 }
14 const res = await fetch('/api/upload/multiple', { method: 'POST', body: formData });
15 const data = await res.json();
16 setFiles(data.files || []);
17 setMessage(data.message);
18 };
19
20 return (
21 <div onDrop={handleDrop} onDragOver={(e) => e.preventDefault()} className="p-6 border border-dashed rounded-lg">
22 <h3 className="font-semibold mb-2">Drag and drop files here</h3>
23 <p className="text-sm text-gray-400">or click to upload manually</p>
24 <ul className="mt-4 space-y-1 text-sm">
25 {files.map((f) => (
26 <li key={f.filename} className="text-green-400">✅ {f.filename}</li>
27 ))}
28 </ul>
29 {message && <p className="mt-2 text-xs text-amber-400">{message}</p>}
30 </div>
31 );
32}Usage
1// Example: Upload file programmatically
2const formData = new FormData();
3formData.append('file', selectedFile);
4await fetch('http://localhost:3001/api/upload/single', { method: 'POST', body: formData });