Vue.js directive to trigger an event when a file is dropped on an element

drop-file.directive.js

export default {
    bind(el, bindings) {
        el.dragEvents = ['dragenter', 'dragover', 'dragleave', 'drop'];
        el.dragEvents.forEach(dragEvent => {
            el.addEventListener(dragEvent, (event) => {
                if (!el.classList.contains(dragEvent)) {
                    el.classList.remove(...el.dragEvents);
                    el.classList.add(dragEvent);
                }
                event.preventDefault();
                event.stopPropagation();
            }, false);
        });
        el.addEventListener('drop', (event) => {
            const file = event.dataTransfer.items
                ? event.dataTransfer.items[0].getAsFile()
                : event.dataTransfer.files[0];
            const fakeFileEvent = { target: { files: [file] } };
            bindings.value(fakeFileEvent);
        }, false);
    },
    unbind(el) {
        el.dragEvents.forEach(dragEvent => {
            el.removeEventListener(dragEvent);
        });
    }
};