gistfile1.txt

const makeImage = (elFile, file) => {
    const elImage = document.createElement('img');
    elFile.appendChild(elImage);

    const reader = new FileReader();
    reader.addEventListener('load', (e) => {
        elImage.src = e.target.result;
    });
    reader.readAsDataURL(file);
};

const createFileList = (upload_files) => {
    const flist = document.getElementById('file_list');
    flist.innerHTML = '';
    upload_files.forEach((file, index) => {
        const elFile = document.createElement('li');
        const file_data = `${file.name}  ${Math.floor(file.size/1024)}KB`;
        elFile.appendChild(document.createTextNode(file_data));

        if (file.type.indexOf('image/') === 0) {
            makeImage(elFile, file);
        }
        flist.appendChild(elFile);
    });
};


$('#drag_drop_area').on({
    'dragover': (e) => {
        e.preventDefault();
        e.originalEvent.dataTransfer.dropEffect = 'copy';
        $('#drag_drop_area').css('background-color', '#cff');
    },
    'dragleave': (e) => {
        e.stopPropagation();
        e.preventDefault();
        $('#drag_drop_area').css('background-color', 'transparent');
    },
    'drop': (e) => {
        e.stopPropagation();
        e.preventDefault();
        $('#drag_drop_area').css('background-color', 'transparent');

        createFileList(Array.from(e.originalEvent.dataTransfer.files));

    }
});