Уявіть: інтернет-магазин із 5000 товарів, кожен із кількома зображеннями. При завантаженні через сервер середній час обробки одного файлу — 2 секунди, при 50 одночасних завантаженнях — 100 секунд. LCP сторінки з продуктами зростає до 12 секунд, INP — до 300 мс. Uploadcare вирішує цю проблему кардинально: файли йдуть напряму в CDN, минаючи ваш сервер. Наша команда має 6+ років досвіду інтеграції CDN-сервісів. Ми використовуємо його в 30+ проєктах, включаючи високонавантажені медіа-сайти, і знаємо, як налаштувати інтеграцію правильно. Після впровадження навантаження на сервер знижується в 3–5 разів, LCP падає до 2 секунд, INP — до 50 мс, а швидкість завантаження сторінок збільшується в середньому на 40%. Середня економія на серверних ресурсах становить 70% від бюджету на хостинг. На одному з проєктів вдалося значно знизити витрати на хостинг. Uploadcare в 5 разів швидше за саморобне рішення при завантаженні файлів.
Як працює Uploadcare?
Wikipedia: CDN — сервіс приймає файли з браузера, ваш бекенд отримує лише UUID. Через URL можна отримати оригінал, прев'ю, змінені версії. Жодного навантаження на хостинг — все обробляється на стороні CDN з автоматичною оптимізацією та кешуванням. Завантаження без сервера — це ключова перевага. Завантаження файлу через Uploadcare замість сервера може скоротити час завантаження з 2 секунд до 0.4 секунди — це більш ніж у 5 разів швидше. Сервіс обробляє мільйони запитів на хвилину, забезпечуючи високу надійність. Uploadcare автоматично перевіряє файли на шкідливе ПЗ, що знижує ризики безпеки.
Чому Uploadcare краще саморобного рішення?
| Критерій | Саморобне рішення | Uploadcare |
|---|---|---|
| Навантаження на сервер | 100% (прийом, обробка, конвертація) | 0% (тільки UUID) |
| Швидкість завантаження | Залежить від сервера | CDN з мультирегіональним кешем |
| Обробка зображень | Потрібен свій код та бібліотеки | URL-параметри без коду |
| Безпека | Потрібен захист від завантаження шкідливих файлів | Вбудована перевірка та DDoS-захист |
Uploadcare знижує час завантаження в 3–5 разів порівняно з класичним підходом. Ми обрали його для себе та клієнтів — 30+ успішних проєктів підтверджують надійність.
Як інтегрувати Uploadcare в React?
Встановіть пакет та налаштуйте компонент завантажувача. Покрокова інструкція:
- Встановіть пакет
@uploadcare/react-uploaderта стилі. - Імпортуйте
FileUploaderRegularта підключіть CSS. - Вкажіть публічний ключ через змінні оточення.
- Використовуйте компонент з колбеками
onFileUploadSuccessтаonFileUploadFailed. - Після успішного завантаження отримайте об'єкт з UUID та відправте його на бекенд.
import { FileUploaderRegular } from '@uploadcare/react-uploader'
import '@uploadcare/react-uploader/core.css'
interface UploadedFile {
uuid: string
cdnUrl: string
name: string
size: number
mimeType: string
}
interface UploaderProps {
onUpload: (file: UploadedFile) => void
accept?: string
maxFileSize?: number
multiple?: boolean
}
function FileUploader({ onUpload, accept, maxFileSize, multiple = false }: UploaderProps) {
return (
<FileUploaderRegular
pubkey={import.meta.env.VITE_UPLOADCARE_PUBLIC_KEY}
multiple={multiple}
accept={accept}
maxLocalFileSizeBytes={maxFileSize}
onFileUploadSuccess={(file) => {
onUpload({
uuid: file.uuid,
cdnUrl: file.cdnUrl,
name: file.name ?? '',
size: file.size ?? 0,
mimeType: file.mimeType ?? '',
})
}}
onFileUploadFailed={(file) => {
console.error('Upload failed:', file.errors)
}}
imgOnly={accept === 'image/*'}
/>
)
}
Якщо потрібен кастомний UI, ми реалізуємо нестандартний завантажувач з нуля. Для відстеження прогресу використовуйте хук useUploadcare — він повертає відсоток завантаження та стан. Приклад:
import { useUploadcare } from '@uploadcare/react-uploader'
function UploadProgress() {
const { progress } = useUploadcare({ pubkey: import.meta.env.VITE_UPLOADCARE_PUBLIC_KEY })
return <div>Прогрес: {progress}%</div>
}
Які трансформації зображень доступні?
Ключова фішка — обробка зображень без коду на бекенді. Збирайте ланцюжки операцій через URL.
| Трансформація | Призначення | Приклад URL-параметра |
|---|---|---|
| resize | Зміна розміру | /resize/800x/ |
| scale_crop | Обрізка з масштабуванням | /scale_crop/300x300/center |
| format | Конвертація в WebP, PNG, JPEG | /format/webp |
| quality | Якість (smart/число) | /quality/smart |
| blur | Розмиття | /blur/20 |
| grayscale | Чорно-біле | /grayscale |
Приклад URL: https://ucarecdn.com/{uuid}/-/scale_crop/300x300/center/-/format/webp/-/quality/smart/.
Приклад повного URL трансформації
https://ucarecdn.com/{uuid}/-/scale_crop/300x300/center/-/format/webp/-/quality/smart/
Захист завантаження на бекенді
Клієнтське завантаження означає, що на бекенд приходить лише UUID. Потрібно верифікувати, що файл реально існує і належить вашому проєкту, перевірити mime-тип та розмір. Приклад на Laravel:
public function store(Request $request): JsonResponse
{
$request->validate([
'file_uuid' => ['required', 'string', 'regex:/^[a-f0-9-]{36}$/'],
]);
$uuid = $request->input('file_uuid');
// Перевірка через Uploadcare REST API
$response = Http::withHeaders([
'Authorization' => 'Uploadcare.Simple ' . config('services.uploadcare.public_key') . ':' . config('services.uploadcare.secret_key'),
])->get("https://api.uploadcare.com/files/{$uuid}/");
if (!$response->successful()) {
return response()->json(['error' => 'Файл не знайдено'], 422);
}
$fileInfo = $response->json();
// Перевірка mime-типу
if (!str_starts_with($fileInfo['mime_type'], 'image/')) {
return response()->json(['error' => 'Допустимі лише зображення'], 422);
}
// Зберігаємо UUID в базу
$media = Media::create([
'uuid' => $uuid,
'cdn_url' => $fileInfo['original_file_url'],
'filename' => $fileInfo['original_filename'],
'size' => $fileInfo['size'],
'mime_type' => $fileInfo['mime_type'],
]);
return response()->json($media);
}
Для Node.js аналогічна перевірка виконується через axios з заголовком авторизації. Ми також підключаємо перевірку через Uploadcare REST API (метод /files/{uuid}/). Це захищає від підробки UUID та небажаних форматів.
Терміни впровадження
Базова інтеграція з віджетом та бекенд-валідацією займає від 0.5 до 1 дня. Якщо потрібен кастомний UI, додаткові обробники або міграція існуючих файлів, терміни уточнюються індивідуально. Термін окупності інтеграції — 2-3 місяці за рахунок зниження витрат на сервери.
Що входить в роботу з інтеграції?
- Встановлення та налаштування віджета Uploadcare (React, Vue або Angular).
- Налаштування CDN-трансформацій під вимоги проєкту.
- Розробка бекенд-валідації UUID (Laravel, Node.js, Django).
- Інтеграція з існуючим сховищем (S3, локальні диски).
- Документація з використання та підтримки.
- Навчання команди (1 година онлайн).
- Гарантія на інтеграцію — 3 місяці.
Замовте інтеграцію Uploadcare під ключ — ми проведемо аудит, налаштуємо віджет та бекенд. Отримайте консультацію з налаштування Uploadcare для вашого проєкту. Зв'яжіться з нами для обговорення ваших завдань.