How To: HTML5 Drag & Drop File Upload

const dropzone = document.getElementById('dropzone');

// Prevent browser defaults
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
  dropzone.addEventListener(event, (e) => e.preventDefault());
});

// Visual hover feedback
dropzone.addEventListener('dragenter', () => dropzone.classList.add('border-emerald-500'));
dropzone.addEventListener('dragleave', () => dropzone.classList.remove('border-emerald-500'));

// Handle dropped files
dropzone.addEventListener('drop', (e) => {
  dropzone.classList.remove('border-emerald-500');
  const files = e.dataTransfer.files;
  if (files.length > 0) {
    console.log("Uploaded file:", files[0].name, files[0].size, "bytes");
  }
});