Drag and Drop
Drag and Drop Interface
A user interface pattern where files are added by dragging them from the file system into a target area.
Technical Detail
Browser drag and drop functionality uses the HTML5 Drag and Drop API and the File API. The dataTransfer object in drag events carries file references that can be read as ArrayBuffer, text, or data URLs using FileReader. The File System Access API (Chrome/Edge) provides direct read/write access to the local file system with user permission. For privacy, modern browsers restrict file path information — only the filename is accessible to JavaScript, not the full directory path.
Example
```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);
}
});
```