<script>
document.querySelectorAll('.file-upload-box').forEach(box => {
    const input = box.querySelector('input[type="file"]');
    const previewId = box.getAttribute('data-preview-id');
    const previewImg = document.getElementById(previewId);

    box.addEventListener('click', () => input.click());

    box.addEventListener('dragover', (e) => {
        e.preventDefault();
        box.style.backgroundColor = '#eef';
    });

    box.addEventListener('dragleave', () => {
        box.style.backgroundColor = '';
    });

    box.addEventListener('drop', (e) => {
        e.preventDefault();
        box.style.backgroundColor = '';
        if (e.dataTransfer.files.length) {
            input.files = e.dataTransfer.files;
            showPreview(input.files[0], previewImg);
        }
    });

    input.addEventListener('change', () => {
        if (input.files.length) {
            showPreview(input.files[0], previewImg);
        }
    });

    function showPreview(file, imgElement) {
        if (!file.type.startsWith('image/')) return;
        const reader = new FileReader();
        reader.onload = e => imgElement.src = e.target.result;
        reader.readAsDataURL(file);
    }
});
</script>

