Локальная обработка файлов в браузере - быстрый предпросмотр!

Выполняем валидацию файла и мгновенно формируем его превью — все операции происходят локально в браузере, без передачи данных на сервер.

Шаг 1 — получаем выбранный файл:
const input = document.querySelector('#file');

Шаг 2 — создаём FileReader для чтения локального файла:
const reader = new FileReader();

Шаг 3 — реагируем, когда чтение завершено:
reader.onload = () => {
console.log('Тип:', currentFile.type);
console.log('Размер:', currentFile.size);
showPreview(reader.result);
};

Шаг 4 — читаем файл, когда пользователь выбирает его:
let currentFile = null;

input.addEventListener('change', () => {
const file = input.files[0];
if (!file) return;

currentFile = file;
reader.readAsDataURL(file);
});

Шаг 5 — универсальная мини-утилита для превью:
function readFilePreview(file, cb) {
const r = new FileReader();
r.onload = () => cb(r.result, file);
r.readAsDataURL(file);
}

Пример использования:
readFilePreview(input.files[0], (dataUrl, file) => {
console.log(file.type, file.size);
previewImg.src = dataUrl;
});

Подходит для: локального предпросмотра изображений, предварительной проверки ограничений, улучшения UX загрузки файлов и минимизации лишних серверных обращений.

Code Ready | #практика