How to Create Image Preview Before Upload - HTML, JavaScript & Tailwind CSS Tutorial

document.addEventListener('DOMContentLoaded', function() {
    const imageUpload = document.getElementById('image-upload');
    const previewContainer = document.getElementById('preview-container');
    const uploadInfo = document.getElementById('upload-info');
    const selectedCount = document.getElementById('selected-count');
    const uploadBtn = document.getElementById('upload-btn');
    let selectedFiles = [];

    // Drag and drop event handlers
    const dropZone = document.querySelector('label[for="image-upload"]').parentElement;
    
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('border-blue-500', 'bg-blue-50');
    });

    // ... (include all the JavaScript from your original code)
    
    function resetUploader() {
        selectedFiles = [];
        imageUpload.value = '';
        updatePreview();
        updateUploadInfo();
    }
});

Step 6: Implement the Core Functions

Add these functions to handle the main logic:

function handleFiles(files) {
    // Filter only image files
    const imageFiles = Array.from(files).filter(file => file.type.match('image.*'));
    
    if (imageFiles.length === 0) {
        alert('Please select image files only');
        return;
    }

    selectedFiles = imageFiles;
    updatePreview();
    updateUploadInfo();
}

function updatePreview() {
    previewContainer.innerHTML = '';
    
    if (selectedFiles.length === 0) {
        previewContainer.innerHTML = `
            <div class="flex items-center justify-center h-32 bg-gray-100 rounded-lg text-gray-400">
                No images selected
            </div>
        `;
        return;
    }

    selectedFiles.forEach((file, index) => {
        const reader = new FileReader();
        reader.onload = function(e) {
            const previewItem = document.createElement('div');
            previewItem.className = 'relative group h-32 bg-gray-100 rounded-lg overflow-hidden';
            previewItem.innerHTML = `
                <img src="${e.target.result}" alt="Preview" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition flex items-center justify-center opacity-0 group-hover:opacity-100">
                    <button class="remove-image-btn p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition" data-index="${index}">
                        <!-- Trash icon -->
                    </button>
                </div>
                <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white text-xs p-1 truncate">
                    ${file.name}
                </div>
            `;
            previewContainer.appendChild(previewItem);
        };
        reader.readAsDataURL(file);
    });

    // Add event listeners to remove buttons
    setTimeout(() => {
        document.querySelectorAll('.remove-image-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                const index = parseInt(btn.getAttribute('data-index'));
                selectedFiles.splice(index, 1);
                updatePreview();
                updateUploadInfo();
            });
        });
    }, 100);
}

Step 7: Add Upload Information Updates

function updateUploadInfo() {
    if (selectedFiles.length > 0) {
        uploadInfo.classList.remove('hidden');
        selectedCount.textContent = selectedFiles.length;
        uploadBtn.disabled = false;
        
        // Calculate total size
        const totalSize = selectedFiles.reduce((total, file) => total + file.size, 0);
        const sizeInMB = (totalSize / (1024 * 1024)).toFixed(2);
        
        // Update info text
        uploadInfo.querySelector('span').innerHTML = `
            ${selectedFiles.length} image(s) selected (${sizeInMB} MB) ready for upload
        `;
    } else {
        uploadInfo.classList.add('hidden');
        uploadBtn.disabled = true;
    }
}

uploadBtn.addEventListener('click', () => {
    if (selectedFiles.length) {
        // In a real application, you would upload the files here
        alert(`Preparing to upload ${selectedFiles.length} image(s)`);
        console.log('Files to upload:', selectedFiles);
        
        // Simulate upload
        setTimeout(() => {
            alert('Upload completed! (This is a demo)');
            resetUploader();
        }, 1500);
    }
});