Разработка формы с загрузкой файлов на сайте под ключ

Разработка формы с загрузкой файлов на сайте

Мы разрабатываем формы загрузки файлов, которые не ломаются на больших файлах, дают обратную связь и не теряют данные при ошибках сети. Например, загрузка 4K-видео на 2 ГБ — не проблема: прогресс-бар показывает реальные проценты, а чанкованная загрузка позволяет продолжить с места обрыва. Наш подход — использовать современные протоколы вроде tus для возобновляемой загрузки и проверять MIME-тип на сервере, а не доверять расширению. Наши формы обрабатывают файлы любого размера и типа, сохраняя удобство для пользователя.

Правильная реализация объединяет надёжный бэкенд и продуманный UX на фронтенде. Без этого пользователи видят белый экран или получают сообщения «Ошибка 500» без объяснения. Мы также валидируем размер и количество файлов, предотвращая перегрузку сервера. Клиенты получают прозрачный процесс и понятные ошибки.

Мы прошли через десятки проектов и собрали best practices, которые экономят время и нервы. Наши формы поддерживают drag-and-drop, превью изображений, отмену загрузки и повторную попытку при ошибках. На сервере мы используем S3-совместимое хранилище с подписанными URL для безопасной раздачи. Это покрывает 90% типовых сценариев.

Почему важна валидация MIME-типа?

Многие разработчики ограничиваются проверкой расширения файла. Злоумышленник легко переименует скрипт в .jpg — и он пройдёт. Мы всегда проверяем MIME-тип по содержимому через mime_content_type() или finfo. Это закрывает 80% атак с загрузкой произвольного кода. В Laravel можно добавить кастомное правило, которое не пропускает даже двойные расширения вроде file.php.jpg.

Что входит в реализацию

Клиентская часть:

• Drag-and-drop зона + кнопка «Выбрать файл»
• Превью для изображений (через FileReader или URL.createObjectURL)
• Прогресс-бар загрузки с реальными процентами
• Валидация: тип файла, размер, количество
• Обработка ошибок с человекочитаемыми сообщениями
• Отмена загрузки через AbortController

Серверная часть:

• Multipart upload с поддержкой больших файлов (chunked upload при необходимости)
• Валидация MIME-типа по содержимому файла, а не только по расширению
• Антивирусная проверка через ClamAV или стороннее API (опционально)
• Хранение: локально, S3-совместимое хранилище (MinIO, AWS S3, Cloudflare R2)
• Генерация уникальных имён файлов, изоляция по пользователям

Технический стек

Пример: базовая загрузка с прогрессом

function uploadFile(file, onProgress) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); const formData = new FormData(); formData.append('file', file); xhr.upload.addEventListener('progress', (e) => { if (e.lengthComputable) { onProgress(Math.round((e.loaded / e.total) * 100)); } }); xhr.addEventListener('load', () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(JSON.parse(xhr.responseText)); } else { reject(new Error(`Upload failed: ${xhr.status}`)); } }); xhr.addEventListener('error', () => reject(new Error('Network error'))); xhr.open('POST', '/api/upload'); xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').content); xhr.send(formData); }); } 

Chunked upload для больших файлов

Если нужна загрузка файлов от 100 МБ и выше — используем разбивку на части. Стандарт де-факто — tus protocol, для S3 — Multipart Upload API. Чанкованная загрузка лучше стандартной в 3 раза при нестабильном соединении — меньше повторных передач.

// tus-js-client import { Upload } from 'tus-js-client'; const upload = new Upload(file, { endpoint: '/api/upload/tus', chunkSize: 5 * 1024 * 1024, // 5 MB chunks retryDelays: [0, 1000, 3000, 5000], metadata: { filename: file.name, filetype: file.type }, onProgress(bytesUploaded, bytesTotal) { const pct = ((bytesUploaded / bytesTotal) * 100).toFixed(1); console.log(`${pct}%`); }, onSuccess() { console.log('Done:', upload.url); }, }); upload.start(); 

На сервере Laravel — пакет ankurk91/laravel-tus-upload или собственная реализация через tus-php.

Валидация на сервере (Laravel)

$request->validate([ 'file' => [ 'required', 'file', 'max:102400', // 100 MB 'mimes:jpg,jpeg,png,pdf,docx', function ($attribute, $value, $fail) { $mime = mime_content_type($value->getRealPath()); $allowed = ['image/jpeg', 'image/png', 'application/pdf']; if (!in_array($mime, $allowed)) { $fail('Тип файла не разрешён.'); } }, ], ]); 

Безопасность

• Никогда не доверять $_FILES['type'] — только mime_content_type() или finfo
• Хранить файлы вне public/ или в отдельном S3 bucket без публичного доступа
• Раздавать файлы через подписанные URL (S3 Presigned URLs) с TTL
• Ограничивать rate limiting на эндпоинт загрузки
• Сканировать архивы (zip bomb protection): проверять соотношение сжатия

Типичные ошибки при разработке форм загрузки

Как мы тестируем формы загрузки?

Мы создаём автотесты на каждый сценарий: успешная загрузка, превышение лимита, неверный тип, обрыв соединения, одновременная загрузка 10 файлов. Для имитации сетевых ошибок используем axios-mock-adapter или cypress с перехватом запросов. Мы более 5 лет занимаемся разработкой сложных форм и гарантируем стабильность.

Процесс работы

1. Аналитика — собираем требования: какие файлы, объёмы, безопасность.
2. Проектирование — выбираем стек, рисуем UX/UI.
3. Реализация — пишем код, настраиваем хранилище.
4. Тестирование — нагрузочное, на граничных значениях, на мобильных сетях.
5. Деплой — настраиваем мониторинг и алерты.

Сроки и стоимость

Базовая форма с drag-and-drop, прогрессом и S3-хранилищем — 3–4 рабочих дня. Chunked upload с возобновлением, антивирусной проверкой и административным интерфейсом — 7–10 дней. Стоимость рассчитывается индивидуально после анализа ваших требований. Оценим проект за 1 день. Для консультации свяжитесь с нами.

Закажите разработку формы с загрузкой файлов — мы используем проверенные решения и даём гарантию на код.