File Upload Card

Provide a modern and user-friendly interface for file uploads with this drag-and-drop card component.

This template is a must-have for any application that requires users to upload files. It provides users with the choice of browsing to the file or dragging files directly onto the drop zone.

Screenshot of a file upload card with a drag-and-drop interface.

Get Source Code Preview

About this Component

This is a functional front-end component powered by a snippet of vanilla JavaScript. The drop zone provides clear visual feedback to the user by changing its appearance when a file is dragged over it. While the component handles the client-side interaction, it would need to be connected to a server-side script to handle the actual file upload process.

Features

Drag-and-Drop Functionality: Allows users to drag files from their desktop directly into the browser.
Interactive Visual Feedback: The drop zone's border and background change style when a file is actively being dragged over it, confirming to the user that it's a valid drop target.
Accessible Design: The visible drop zone is a label for a hidden, semantic input type="file", making the uploader fully accessible to keyboard and screen reader users.

Code Breakdown

HTML Structure

The structure is very simple and robust. The visual component is a single label element with the class .file-drop-zone. This label acts as the entire card, the drop area, and the clickable trigger. The standard input type="file" is placed inside the label and is visually hidden by the CSS. By placing the input inside, it is implicitly associated with the label, ensuring that clicking anywhere on the card will open the file browser.

CSS Styling

A dashed border is used on the .file-drop-zone to give it the appearance of a placeholder. The JavaScript adds a class, .is-dragover, to this element when a file is being dragged over it. The CSS rule .file-drop-zone.is-dragover then targets this class to change the border style and background color, providing instant visual feedback to the user.

JavaScript Logic

The script adds several event listeners to the drop zone. The dragover and drop event listeners call event.preventDefault(), which is required to stop the browser from its default action of trying to open the dropped file. The dragover listener adds the .is-dragover class, while the dragleave listener removes it. The drop event listener accesses the dropped files via event.dataTransfer.files and assigns them to our hidden file input's files property, making it ready for a form submission or an API call.

Code

Here's the complete code. The front-end interaction is ready to use, but you will need to add your own back-end logic to handle the file processing once a user has selected or dropped their files.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Optional: a container to center the card on the page for demonstration */
.demo-container-upload {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* === File Upload Card Styles === */
/* The label itself is the card and the drop zone */
.file-drop-zone {
    --upload-radius: 12px;
    --upload-shadow: 0 4px 10px rgba(0,0,0,0.06);
    --upload-accent-color: #4f46e5; /* Indigo */

max-width: 500px;
    width: 100%;
    
    background-color: #ffffff;
    border: 2px dashed #d1d5db;
    border-radius: var(--upload-radius);
    box-shadow: var(--upload-shadow);
    
    padding: 3rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.file-drop-zone:hover {
    border-color: var(--upload-accent-color);
}
/* Style for when a file is dragged over the zone */
.file-drop-zone.is-dragover {
    border-style: solid;
    border-color: var(--upload-accent-color);
    background-color: #f9fafb;
}

.upload-icon {
    width: 48px;
    height: 48px;
    color: var(--upload-accent-color);
    margin: 0 auto 1rem;
}

.upload-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: #374151;
    margin: 0;
}
.upload-text-secondary {
    font-size: 0.9rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* This is the hidden file input */
.file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

</style>

<div class="demo-container-upload">
    
    
    <label for="fileUpload" class="file-drop-zone">
        <input class="file-input" type="file" id="fileUpload" multiple>
        <svg class="upload-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M3 15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 16V3M12 3L16 7.375M12 3L8 7.375" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
        <p class="upload-text-secondary">or click to browse</p>
    </label>

</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const dropZone = document.querySelector('.file-drop-zone');
    const fileInput = document.querySelector('.file-input');

if (dropZone && fileInput) {
        // The label's default behavior handles opening the file browser.

// Add class on drag over
        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault(); // This is necessary to allow a drop
            dropZone.classList.add('is-dragover');
        });

// Remove class on drag leave
        dropZone.addEventListener('dragleave', () => {
            dropZone.classList.remove('is-dragover');
        });

// Handle the dropped files
        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.classList.remove('is-dragover');
            
            const files = e.dataTransfer.files;
            if (files.length) {
                fileInput.files = files; // Assign files to the input
                // In a real application, you would trigger the upload process here.
                // For demonstration, we'll log the files to the console.
                console.log('Files dropped:', files);
            }
        });
        
        // Handle files selected via the browser dialog
        fileInput.addEventListener('change', () => {
             if (fileInput.files.length) {
                console.log('Files selected:', fileInput.files);
             }
        });
    }
});
</script>

View Output