Розробка форми завантаження файлів на сайті під ключ

Розробка форми з завантаженням файлів на сайті

Ми розробляємо форми завантаження файлів, які не ламаються на великих файлах, дають зворотний зв'язок і не втрачають дані при помилках мережі. Наприклад, завантаження 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 день. Для консультації зв'яжіться з нами.

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