Хочу отловить момент перед загрузкой файла с помощью input(сделать расширение, которое будет иметь такую возможность)

Возможно ли это технически? Полагаю, что нет, а единственная возможность - апгрейд браузера / создание своего. Хочу отлавливать и предлагать совершенно свои варианты. Сколько искал инфу - не нашел ни одного упоминания даже близко. Скорее всего не так задаю вопрос.

Если быть совсем точным, то требуется остановить открытие выбора файла, а вместо него сделать свой вариант, но если его пропустить, то продолжить стандартный сценарий


Ответы (2 шт):

Автор решения: jorlyf

Смог найти частичную документацию. 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>
→ Ссылка
Автор решения: yar85

Если быть совсем точным, то требуется остановить открытие выбора файла, а вместо него сделать свой вариант, но если его пропустить, то продолжить стандартный сценарий

В общем случае, будет достаточно добавить (как можно раньше!) слушатель события 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", есть и другие ляпы), но сама суть механизмов распространения там передана верно.

→ Ссылка