Как проверить файл на соответсвие mime типу и расширению?

Question

[Leonardo-lavanda]

У инпута типа файл есть очень удобный атрибут accept, где можно вставить расширение файла или mime тип:

<input type="file" accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

<input type="file" accept="image/*" /> <!-- all image types --> 
<input type="file" accept="audio/*" /> <!-- all audio types --> 
<input type="file" accept="video/*" /> <!-- all video types -->

Как сделать аналогичную валидацию на js, допустим, если уберут этот атрибут через инструмент разработчика и эта валидация просто пропадёт? Это spa на vue, поэтому отключением js можно не пугать

Comments

[Kentavr16]

Так на сервере можно прописать прием файла по mime. Если! =то ошибка

[Leonardo-lavanda]

Kentavr16, да, это естественно, просто хочется еще одну ступень защиты добавить

[Kentavr16]

Leonardo-lavanda, так а смысл? Пользователь не может повлиять на код сервера. Соответственно все окей

[Tim]

Leonardo-lavanda, посмотрите этот объект

document.querySelector('input[type="file"]').files[0]

[Вадим]

simonenko.su/38146501854/improving-ux-for-web-form

[Aetae]

Если кто-то убрал атрибут - он уберёт и js. Он может даже вообще не трогать твой фронт и слать запросы сразу на бэк. Потому если смысл в защите какой-то, то нет в этом смысла.
Если же цель - строгое ограничение, то ответ Tim тебе в помощь. Атрибут этот - он только рекомендация, а не ограничение(в окошке выбора всегда можно переключиться на "все файлы").