Modern Drag & Drop Upload

Implementation Details

// Client-side drag & drop handling
dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    const files = e.dataTransfer.files;
    uploadFiles(files);
});

// AJAX upload with progress tracking
function uploadFiles(files) {
    const formData = new FormData();
    formData.append('file', file);

    fetch(uploadUrl, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSuccess('File uploaded successfully!');
            location.reload(); // Refresh to show new file
        } else {
            showError(data.error);
        }
    });
}

Features Demonstrated

• HTML5 Drag & Drop API - Native browser drag-and-drop support
• FileReader API - Client-side image preview before upload
• FormData API - AJAX file upload without form submission
• Fetch API - Modern promise-based HTTP requests
• Progressive Enhancement - Falls back to standard file input
• Responsive Design - Works on desktop and mobile devices

Browser Support

This demo uses modern web APIs supported by all current browsers:

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

Troubleshooting