Drag and Drop File Upload in Javascript

By SATYAM SRIVASTAVA / March 24, 2025

Views: 7

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 checking file.type.
✅ Display progress while uploading files.

This guide gives you a fully functional drag-and-drop file upload feature using Vanilla JavaScript. 🚀

Leave a Comment Cancel Reply