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

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

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

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

Фронтенд-розробка React: від аудиту до production

Бандл виріс до 3.1 MB gzip — це реальна цифра з проєкту, який прийшов до нас на аудит. Причина: moment.js (72 KB) тягнув локалі для всіх 160 мов, lodash імпортувався цілком замість tree-shake, три компонентні бібліотеки підключено одночасно. TTFB відмінний, але TTI (Time to Interactive) на мобільному — 14 секунд. Користувачі йшли, конверсія впала на 40%. Ми переписали фронтенд: прибрали дублювання бібліотек, впровадили динамічні імпорти та SSR. Результат — бандл зменшився до 850 KB gzip, TTI — 2.1 секунди, LCP — 1.8 с.

Frontend — це не «намалювати красиво». Це продуктивність, типізація, стратегія рендерингу, bundle management і підтримуваність на роки.

Чому Next.js — стандартний вибір для SEO?

React — наш основний UI-фреймворк для складних інтерфейсів. Next.js — стандартний вибір для проєктів з SEO-вимогами або SSR. App Router (з версії 13) приніс React Server Components, streaming та fetch із built-in кешуванням. Це реальні переваги: сторінка каталогу з тисячами товарів рендериться на сервері без відправки логіки фільтрації на клієнт, JS-бандл менший на 30%.

Але App Router — інший спосіб мислення. "use client" потрібно ставити свідомо. Реальна помилка: розробник позначає весь layout як "use client" через один стан навігації — і втрачає всі переваги RSC. Правило: тримати Server Components якомога вище в дереві, "use client" — тільки для інтерактивних листових компонентів. ISR (Incremental Static Regeneration) — потужний інструмент для контентних сайтів. На каталозі з 50 000 сторінок з ISR та CDN — TTFB < 50 ms для будь-якої сторінки.

Як TypeScript запобігає багам у продакшені?

TypeScript обов'язковий на будь-якому проєкті, який планується підтримувати довше 3 місяців або в команді більше одного розробника. Аргумент «пишемо швидко без типів» працює лише перші 2 тижні. Після — баги, пов'язані з невизначеними значеннями, виникають щотижня.

Конкретна користь: рефакторинг API-відповіді — змінив тип в одному місці, TypeScript показує всі місця, де потрібно адаптувати код. Без типів — баг у продакшені через тиждень. strict: true в tsconfig.json — обов'язково. noImplicitAny, strictNullChecks, strictFunctionTypes. Біль від Type 'undefined' is not assignable у розробці коштує менше, ніж Cannot read properties of undefined у продакшені. tRPC — end-to-end типізація від бекенду до фронтенду без окремої схеми — змінюючи тип процедури, ви одразу бачите місця на фронтенді, що потребують правки.

Vue 3 + Nuxt 3 — альтернативний стек для SSR

Vue 3 з Composition API — інший стиль розробки, ближчий до React Hooks. <script setup> та composables роблять код більш перевикористовуваним. Nuxt 3 — фреймворк для Vue з SSR/SSG, аналогічний Next.js. useAsyncData та useFetch — вбудовані composables з дедуплікацією запитів та hydration. Auto-imports зручні, але можуть заплутувати при debug. Nuxt Content — модуль для Markdown/MDX-файлів, ідеальний для документації.

Hydration mismatch — специфічний біль SSR на Vue та React. Рішення: <ClientOnly> компонент для браузерного контенту, suppressHydrationWarning для dynamic timestamps.

Продуктивність: метрики та інструменти

Bundle analysis — стартова точка. @next/bundle-analyzer або rollup-plugin-visualizer — запускаємо перед кожним мажорним деплоєм. Мета: жодна сторінка не повинна вимагати > 200 KB JS gzip для first paint.

Динамічні імпорти для важких компонентів:

const RichEditor = dynamic(() => import('@/components/RichEditor'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

Редактор (Tiptap, Quill, CodeMirror) — типові кандидати на dynamic import. Без цього вони потрапляють в основний бандл. React DevTools Profiler — для пошуку зайвих ре-рендерів. React.memo, useMemo, useCallback — точкові інструменти. Передчасна мемоізація всього підряд додає overhead без користі. Профілюйте спочатку, оптимізуйте потім.

Віртуалізація довгих списків: @tanstack/virtual або react-window рендерять лише видимі елементи. Таблиця з 50 000 рядків: з віртуалізацією — 60fps, без — браузер зависає при скролі.

State management: без овериніжирингу

Для більшості додатків достатньо:

• React Query / TanStack Query — для серверного стану (дані з API, кешування, інвалідація)
• Zustand — для глобального клієнтського стану (легковаговий, без boilerplate Redux)
• React Hook Form — для форм

Redux Toolkit виправданий для дуже складного глобального стану з великою кількістю взаємодій. Для більшості задач — це overkill. Recoil, Jotai — атомарні підходи для незалежних шматків стану.

CSS та дизайн-система

Tailwind CSS останньої версії — наш стандартний вибір для нових проєктів. Utility-first, відмінна інтеграція з компонентними бібліотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива, коли потрібна більш явна ізоляція стилів. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненти з повним контролем над стилями. Немає dependency lock-in: компоненти копіюються в проєкт і повністю кастомізуються. Storybook — для документування компонентної бібліотеки. React DevTools Profiler — офіційний інструмент від команди React.

Тестування

E2E тести через Playwright — для checkout, авторизації, критичних форм. Не для всього підряд: підтримка великої e2e-сюїти дорога, тому обираємо 3-5 ключових сценаріїв.

Орієнтири за термінами та складом робіт

Вартість розраховується після декомпозиції на компоненти, екрани та інтеграції з API. Ми використовуємо N+1 оцінку: додаємо 20% на ризики.

Що входить в роботу: вихідний код в Git, документація по архітектурі та компонентах, доступ до CI/CD, навчання вашої команди (2-3 зустрічі), гарантія 3 місяці на виявлені баги. Додатково — покриття юніт-тестами ключових модулів.

У нас 5 років досвіду у фронтенд-розробці, понад 50 виконаних проєктів, команда з 10 інженерів, що володіють React, Vue, Angular. Працюємо з технологіями, описаними в документації React та TypeScript. Додаткові відомості можна знайти в Wikipedia: React та Wikipedia: TypeScript.

Який стек обрати для фронтенд-розробки React?

Ми порівнюємо інструменти за реальними метриками. Next.js швидший за Nuxt у збірці SSR на 20–30% при однаковому розмірі сторінки. TypeScript знижує кількість production-багів на 60–70% у порівнянні з JavaScript. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий SPA з мінімальною вартістю — достатньо React + Vite. Для контентного сайту з SEO — Next.js з ISR дає TTFB нижче 50 мс навіть при 50 000 сторінок.

Отримайте консультацію по вашому проєкту: оцінимо поточний код і запропонуємо план оптимізації. Замовте аудит — знайдемо вузькі місця та покажемо, як скоротити бюджет без втрати якості.