const dropArea = document.getElementById("drop-area");
const fileInput = document.getElementById("file-input");

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, e => e.preventDefault());
    dropArea.addEventListener(eventName, e => e.stopPropagation());
});

['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'));
});

['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'));
});


dropArea.addEventListener('click', () => fileInput.click());

dropArea.addEventListener('drop', e => {
    const files = e.dataTransfer.files;
    handleFiles(files);
});

fileInput.addEventListener('change', e => {
        handleFiles(e.target.files);
});

function handleFiles(files) {
    console.log("file dropped");
}