init-dnd.js

function initDnD(element, cb, accept = 'image/*') {
    let input = document.createElement('input');
    input.type = 'file';
    input.accept = accept;
    input.addEventListener('change', (e) => {
        cb(input.files[0]);
    });
    element.addEventListener('click', (e) => {
        e.preventDefault();
        input.click();
    });

    const elementClassName = element.className;
    element.ondragover = () => {
        element.className = `active ${elementClassName}`;
        return false;
    };
    element.ondragend = () => {
        element.className = elementClassName;
        return false;
    };
    const typePattern = new RegExp(accept.replace('*', '.+'));
    element.ondrop = (e) => {
        element.className = elementClassName;
        e.preventDefault();
        let file = e.dataTransfer.files[0];
        if (typePattern.test(file.type)) {
            cb(e.dataTransfer.files[0]);
        }
    };
}