Как сделать проверку на input type file с системой Drag and Drop?

Question

[vealruk]

Люди добрые помогите! все мозги сломал! Такое дело. есть скрипт на отправку файлов через drag and drop. мне надо сделать проверку на определенные типы файлов. при этом, чтобы выводило в лейбл для инпута имя файла. если формат файла не совпадает, то в лейбле появляется надпись "неверный формат". проверка работает для change, но не работает на drop. не понимаю в чем дело.

JS:

let dropArea = document.getElementById('modalForm');
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false)
})

function preventDefaults(e) {
    e.preventDefault()
    e.stopPropagation()
};
['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, highlight, false)
});
['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, unhighlight, false)
})

function highlight(e) {
    dropArea.classList.add('dragover')
}

function unhighlight(e) {
    dropArea.classList.remove('dragover')
}

dropArea.addEventListener('drop', handleDrop, false)

function handleDrop(e) {
    let dt = e.dataTransfer
    let files = dt.files
    handleFiles(files)
}

function handleFiles(files) {
    files = [...files]
}

dropArea.addEventListener('change', function (e) {
    let url = dropArea.getAttribute('action');
    var xhr = new XMLHttpRequest();
    var formData = new FormData();
    let fileName = $("input[type=file]").val().replace(/.*\\/, "");
    let fileExt = fileName.split('.').pop();
    xhr.open('POST', url, true);
    xhr.addEventListener('readystatechange', function (e) {
        if (xhr.readyState == 4 && xhr.status == 200 && fileExt == 'doc' || fileExt == 'docx' || fileExt == 'pdf') {
            $(".modal__input").text(fileName);
            $('#btnSubmit').prop("disabled", false); 
        } else if (xhr.readyState == 4 && xhr.status != 200 && fileExt !== 'doc' || fileExt !== 'docx' || fileExt !== 'pdf') {
            $('.modal__input').text("Неверный формат!");
        };
    });
    formData.append('file', file);
    xhr.send(formData);
});

dropArea.addEventListener('drop', function (e) {
    let url = dropArea.getAttribute('action');
    var xhr = new XMLHttpRequest();
    var formData = new FormData();
    let fileName = $("input[type=file]").val().replace(/.*\\/, "");
    let fileExt = fileName.split('.').pop();
    xhr.open('POST', url, true);
    xhr.addEventListener('readystatechange', function (e) {
        if (xhr.readyState == 4 && xhr.status == 200 && (fileExt == 'doc' || fileExt == 'docx' || fileExt == 'pdf')) {
            $(".modal__input").text(fileName);
            $('#btnSubmit').prop("disabled", false); 
        } else if (xhr.readyState == 4 && xhr.status != 200 && (fileExt !== 'doc' || fileExt !== 'docx' || fileExt !== 'pdf')) {
            $('.modal__input').text("Неверный формат!");
        };
    });
    formData.append('file', file);
    xhr.send(formData);
});

HTML:

<form enctype="multipart/form-data" class="modal__form" id="modalForm" action="send/" method="post">
				<h1 id="title" class="modal__title">Сопроводительное письмо</h1>
				<input id="textarea" class="modal__textarea" required>
				<h2 class="modal__subtitle">Загрузите резюме</h2>
				<div class="modal__input-wrapper">
					<input style="display: none;" id="file" type="file" onchange="handleFiles(this.files)" accept=".doc, .docx, .pdf">
					<label class="modal__input" for="file">Выберите файл</label>
					<span>или перетащите его сюда</span>
				</div>
				<button id="btnSubmit" class="btn" disabled>Откликнуться</button>
			</form>

Comments

[vealruk]

Вадим, у меня уже все готово, что в статье. только проверку осталось сделать рабочую.

[Вадим]

vealruk, Да, я уже заметил, после того как скинул.
Однако не совсем. Сравните свой код с кодом в той статье. Там всё локонично, общий код вынесен в отдельную функцию.
У Вас же куча дублирования и несколько обработчиков одного и того же события на один и тот же элемент.
Не мудрено что где-то происходит ошибка.
А хорошим тоном считаетсяо формлять подобный код в песочнице. Такой как jsfiddle или codepen. Так такие вопросы обычно решаются быстрее.