Хочу отловить момент перед загрузкой файла с помощью input(сделать расширение, которое будет иметь такую возможность)
Возможно ли это технически? Полагаю, что нет, а единственная возможность - апгрейд браузера / создание своего. Хочу отлавливать и предлагать совершенно свои варианты. Сколько искал инфу - не нашел ни одного упоминания даже близко. Скорее всего не так задаю вопрос.
Если быть совсем точным, то требуется остановить открытие выбора файла, а вместо него сделать свой вариант, но если его пропустить, то продолжить стандартный сценарий
Ответы (2 шт):
Смог найти частичную документацию. https://developer.mozilla.org/ru/docs/Web/Events и написать что-то подобное
<script>
function handleChooseFile(input) {
console.log('отловил');
}
const inputs = document.querySelectorAll('input[type="file"]');
console.log(inputs);
for (let i = 0; i < inputs.length; i++) {
const input = inputs[i];
input.addEventListener('click', () => handleChooseFile(input));
console.log(input);
}
</script>
Если быть совсем точным, то требуется остановить открытие выбора файла, а вместо него сделать свой вариант, но если его пропустить, то продолжить стандартный сценарий
В общем случае, будет достаточно добавить (как можно раньше!) слушатель события click на window, обрабатывающий события на этапе их захвата (распространения события "вниз" по DOM-дереву):
const handler = evt => {
if (!evt.target.matches('input[type="file"]')) return; // если событие было возбуждено не файловым инпутом, игнорируем
const confirmed = confirm('Правда хотите загрузить что-то в злые интернеты?');
if (!confirmed) { // тут может быть любое условие отмены обычной обработки события
evt.preventDefault(); // так предотвращается обычная обработка события
/* ....здесь могут быть какие-либо доп. действия: "сделать свой вариант".... */
}
};
window.addEventListener('click', handler, true); // третий аргумент здесь включает обработку событий на их захвате (а по-умолчанию, слушатель вызывается на этапе всплытия)
<input type="file">
Обработка событий таким образом, нужна для достижения двух целей:
- повышение вероятности успешного перехвата события
// фаза захвата события предшествует фазе его всплытия - а т.к.windowнаходится "наверху" дерева DOM, на этапе захвата его обработчики срабатывают раньше добавленных на дочерние узлы - избежание необходимости добавлять обработчик каждому элементу
// применяемая тут техника называется делегированием обработки событий. Ее плюсом (важным для данной задачи) является то, что так будут обрабатываться события возникающие и на динамически добавляемых элементах - а не только на присутствующих в DOM на момент выполнения скрипта
Комменты в примере сдвинуты чтобы не сильно мешали восприятию кода - для более удобного их прочтения, советую развернуть пример на всю страницу.
Что почитать по теме:
Введение в события (MDN) - большая и подробная вводная статья по обработке DOM-событий, ориентирована на новичков;
Всплытие и погружение захват (learn.javascript.ru) - именно о распространении событий. В статье повсеместно используется некорректная терминология (помимо слишком вольного перевода "capturing", есть и другие ляпы), но сама суть механизмов распространения там передана верно.