$(document).ready(function(){
    $('#drop-zone').on('click', function(e) {
        $('#file-input').get(0).click();
    });
        
    $('#drop-zone').on('dragover', function(event) {
        event.preventDefault();
        event.stopPropagation();
        $(this).addClass('dragover');
    });
        
    $('#drop-zone').on('dragleave', function(event) {
        event.preventDefault();
        event.stopPropagation();
        $(this).removeClass('dragover');
    });
        
    $('#drop-zone').on('drop', function(event) {
        event.preventDefault();
        event.stopPropagation();
        $(this).removeClass('dragover');
        const files = event.originalEvent.dataTransfer.files;
        $('#file-input')[0].files = files;
        
        const fileList = $('#file-list');
        fileList.empty();
        for (let i = 0; i < files.length; i++) {
            fileList.append('<div class="file-list">' + files[i].name + '</div>');
        }
    });
        
    $('#file-input').on('change', function() {
        const files = $(this)[0].files;
        const fileList = $('#file-list');
        fileList.empty();
        for (let i = 0; i < files.length; i++) {
            fileList.append('<div class="file-list">' + files[i].name + '</div>');
        }
    });
});