Drag and Drop
Drag and Drop (Metode Input File)
Pola interaksi pengguna di mana file dipilih dengan menyeretnya dari desktop atau pengelola file langsung ke zona drop aplikasi web, menyediakan alternatif intuitif untuk dialog pemilih file tradisional.
Detail Teknis
API Drag and Drop HTML5 menggunakan event dragenter, dragover, dragleave, dan drop pada elemen target. Properti dataTransfer.files dari event drop menyediakan FileList dari file yang di-drop. Untuk direktori, metode DataTransferItem.webkitGetAsEntry() memungkinkan pembacaan rekursif melalui File and Directory Entries API. Umpan balik visual CSS selama dragover (highlight border, pesan overlay) sangat penting untuk kegunaan. API ini bekerja bersamaan dengan fallback untuk aksesibilitas.
Contoh
```javascript
// Drag and drop file handler
dropZone.addEventListener('drop', async (e) => {
e.preventDefault();
const files = Array.from(e.dataTransfer.files);
for (const file of files) {
console.log(`${file.name}: ${(file.size/1024).toFixed(1)} KB`);
const data = await file.arrayBuffer();
processFile(data);
}
});
```