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

Question

[gifon]

Привет, у меня есть
я получаю файл событием ondrag но как фильтровать fileList на accept

Comments

[Rise]

А как вы получили файл событием ondrag, если здесь написано что оно выполняется, когда пользователь перетаскивает элемент или выделенный текст? Про файл там не написано.

Answer 1

[Максим Морев]

Вот здесь можно найти утилитарную функцию, которая это сделает.

Дальше проще:

import { verifyAccept } from '@morev/utils';

const ACCEPT = 'image/*, .pdf';

const onFilesChange = (event) => {
  const verifiedFiles = [...event.target?.files || []]
    .filter((file) => verifyAccept(file.type, ACCEPT));

  // Делаете с ними, что вам там нужно 
}

Comments

[Rise]

Это typescript же, не?

[Максим Морев]

Rise, резонно.
Отстрелил типы, так как в тегах указан только javascript

Answer 2

[TheK0tYaRa]

Попробуй что-то такое:

dropZone.addEventListener('dragenter', (event) => {
  const item = event.dataTransfer.items[0];
  const type = item.type;

  // Check if the item type matches the filter criteria
  if (type === 'image/png' || type === 'image/jpeg') {
    // Allow the item to be dropped
    dropZone.classList.add('drag-over');
  } else {
    // Prevent the item from being dropped
    event.preventDefault();
  }
});