File Uploader - Code Explanation

HTML STRUCTURE

<div class="upload-area" id="uploadArea">
    <div class="upload-icon">📤</div>
    <div class="upload-text"><strong>Click to upload or drag and drop</strong></div>
</div>

<input type="file" id="fileInput" multiple>

<div class="file-list" id="fileListContainer">
    <div class="file-list-title">Uploaded Files</div>
    <div id="fileList"></div>
</div>

JAVASCRIPT CODE

let files = [];

const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');

uploadArea.addEventListener('click', () => fileInput.click());

uploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    uploadArea.classList.add('dragover');
});

uploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    uploadArea.classList.remove('dragover');
    handleFiles(e.dataTransfer.files);
});

fileInput.addEventListener('change', (e) => {
    handleFiles(e.target.files);
});

function handleFiles(newFiles) {
    Array.from(newFiles).forEach(file => {
        if (file.size > 10 * 1024 * 1024) {
            alert(file.name + ' is too large (max 10MB)');
            return;
        }
        
        files.push({
            id: Date.now() + Math.random(),
            name: file.name,
            size: (file.size / 1024 / 1024).toFixed(2),
            type: file.type,
            date: new Date().toLocaleDateString()
        });
    });
    
    displayFiles();
}

function displayFiles() {
    const container = document.getElementById('fileListContainer');
    const fileList = document.getElementById('fileList');
    
    fileList.innerHTML = '';
    
    files.forEach(file => {
        const fileItem = document.createElement('div');
        fileItem.className = 'file-item';
        fileItem.innerHTML = `
            <div class="file-info">
                <div class="file-name">${file.name}</div>
                <div class="file-size">${file.size} MB</div>
            </div>
            <button onclick="deleteFile(${file.id})">Delete</button>
        `;
        fileList.appendChild(fileItem);
    });
}

function deleteFile(id) {
    files = files.filter(f => f.id !== id);
    displayFiles();
}

KEY FEATURES

✓ Click Upload Functionality
✓ Drag & Drop Support
✓ File Size Validation (10MB max)
✓ Multiple File Upload
✓ File Information Display
✓ Delete File Option
✓ Dynamic File List Rendering
✓ Date Stamping

LEARNING CONCEPTS

• File Input Events (change, dragover, drop)
• preventDefault() for Drag Events
• FileList to Array Conversion (Array.from)
• File Size Calculation (Bytes to MB)
• Array.filter() for File Deletion
• Dynamic ID Generation (Date.now() + Math.random())
• classList Methods (add, remove)
• Template Literals for Dynamic HTML

← Back to Project