Here’s a step-by-step guide to implementing a drag-and-drop file upload feature using Vanilla JavaScript.
Step 1 : Create the HTML structure
Start by setting up the basic structure for the file upload area.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Drag and Drop File Upload</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="upload-container"> <h2>Drag & Drop File Upload</h2> <div id="drop-area" class="drop-area"> <p>Drag & Drop files here or <span id="file-select">Browse</span></p> <input type="file" id="file-input" multiple hidden> </div> <div id="file-list"></div> </div> <script src="script.js"></script> </body> </html>
Step 2: Style the Upload Area
Now style the drag and drop area using CSS.
/* styles.css */ body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f8f9fa; } .upload-container { text-align: center; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); width: 400px; } .drop-area { border: 2px dashed #007bff; padding: 20px; border-radius: 10px; background: #f1f1f1; cursor: pointer; } .drop-area p { margin: 0; font-size: 16px; } #file-select { color: #007bff; text-decoration: underline; cursor: pointer; } .drop-area.dragover { background: #cce5ff; } #file-list { margin-top: 10px; text-align: left; }
Step 3:Add JavaScript for Drag and Drop Functionality
Now, handle the drag-and-drop events and file selection in JavaScript
// script.js const dropArea = document.getElementById("drop-area"); const fileInput = document.getElementById("file-input"); const fileSelect = document.getElementById("file-select"); const fileList = document.getElementById("file-list"); // Open file dialog when clicking "Browse" fileSelect.addEventListener("click", () => fileInput.click()); // Handle file selection fileInput.addEventListener("change", (event) => { handleFiles(event.target.files); }); // Prevent default behaviors for drag events ["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => { dropArea.addEventListener(eventName, preventDefaults, false); }); // Add highlight effect when dragging over the drop area ["dragenter", "dragover"].forEach(eventName => { dropArea.addEventListener(eventName, () => dropArea.classList.add("dragover"), false); }); // Remove highlight when leaving drop area ["dragleave", "drop"].forEach(eventName => { dropArea.addEventListener(eventName, () => dropArea.classList.remove("dragover"), false); }); // Handle dropped files dropArea.addEventListener("drop", (event) => { let files = event.dataTransfer.files; handleFiles(files); }); // Prevent default behavior function preventDefaults(event) { event.preventDefault(); event.stopPropagation(); } // Process selected or dropped files function handleFiles(files) { fileList.innerHTML = ""; // Clear previous files [...files].forEach(file => { let listItem = document.createElement("p"); listItem.textContent = `📄 ${file.name} (${(file.size / 1024).toFixed(2)} KB)`; fileList.appendChild(listItem); }); }
Step 4: Test the Drag and Drop Upload
-
Drag and drop a file into the upload area.
-
Click “Browse” to manually select a file.
-
The file name and size will be displayed below the drop area.
Enhancements
✅ Add an actual file upload feature using
FormData
and an API.
✅ Restrict file types by checkingfile.type
.
✅ Display progress while uploading files.This guide gives you a fully functional drag-and-drop file upload feature using Vanilla JavaScript. 🚀