Как фильтровать файлы на drag and drop в input type file?

Для фильтрации файлов при использовании функциональности drag and drop в элементе input type file вам понадобится сочетание событий dragenter, dragover и drop, а также дополнительные проверки на типы файлов.

Вот пример кода на JavaScript, который реализует фильтрацию файлов при использовании drag and drop:

// Получаем элементы
var inputElement = document.getElementById("file-input");
var dropZone = document.getElementById("drop-zone");

// Предотвращаем перенаправление при событиях dragover и drop
dropZone.addEventListener("dragover", function(e) {
  e.preventDefault();
});

dropZone.addEventListener("drop", function(e) {
  e.preventDefault();

  // Получаем список файлов
  var files = e.dataTransfer.files;

  // Фильтруем файлы по типу
  var filteredFiles = Array.from(files).filter(function(file) {
    return file.type === "image/png" || file.type === "image/jpeg";
  });

  // Выводим отфильтрованные файлы
  for (var i = 0; i < filteredFiles.length; i++) {
    console.log(filteredFiles[i].name);
  }

  // Отправляем отфильтрованные файлы в input
  inputElement.files = filteredFiles;
});

В этом примере у нас есть два элемента: input с идентификатором "file-input" и область перетаскивания с идентификатором "drop-zone". Мы прослушиваем события dragover и drop на области перетаскивания, предотвращая переадресацию по умолчанию для обоих событий.

Внутри обработчика события drop мы получаем список файлов, перетащенных в область. Затем мы фильтруем список файлов, оставляя только файлы с типом "image/png" или "image/jpeg". Для фильтрации файлов мы используем метод filter() для массива объектов File.

Затем мы выводим имена отфильтрованных файлов в консоль и передаем их в качестве значений для свойства files элемента input. Это позволяет отображать файлы в элементе input, как если бы пользователь выбрал их через обычное окно выбора файлов.

Важно отметить, что фильтрация типов файлов, указанная в примере (только png и jpeg), может быть изменена на любые другие типы файлов в соответствии с вашими потребностями.

Надеюсь, этот пример поможет вам реализовать фильтрацию файлов при использовании drag and drop в элементе input type file.