Uploadcare Integration for File Uploads and Processing

Imagine an e-commerce site with 5000 products, each with multiple images. When uploading through the server, processing a single file takes 2 seconds on average; with 50 concurrent uploads, that's 100 seconds. The page's LCP grows to 12 seconds, INP to 300 ms. Uploadcare solves this radically: files go directly to the CDN, bypassing your server. We've used it in 30+ projects, including high-traffic media sites, and know how to set up the integration correctly. After implementation, server load drops by 3–5 times, LCP falls to 2 seconds, INP to 50 ms, and page load speed increases by 40% on average. Average savings on server resources reach 70% of hosting budget. Savings depend on individual project scope.

How Uploadcare Works

The CDN service accepts files from the browser; your backend receives only the UUID. Via the URL you can get the original, preview, or transformed versions. Zero load on your hosting — everything is processed on the CDN side with automatic optimization and caching. Uploading a file through Uploadcare instead of the server can reduce upload time from 2 seconds to 0.4 seconds — more than 5x faster. The service processes millions of requests per minute, ensuring high reliability. Uploadcare automatically checks files for malware, reducing security risks.

Why Uploadcare Beats a Custom Solution

Uploadcare reduces upload time 3–5x compared to the classic approach. We chose it for ourselves and clients — 30+ successful projects confirm its reliability.

How to Integrate Uploadcare in React

Install the package and configure the upload component. Step-by-step instructions:

1. Install @uploadcare/react-uploader and styles.
2. Import FileUploaderRegular and the CSS.
3. Provide the public key via environment variables.
4. Use the component with onFileUploadSuccess and onFileUploadFailed callbacks.
5. On success, get the object with UUID and send it to the backend.

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/*'} /> ) } 

If a custom UI is required, we implement a custom uploader from scratch. To track progress, use the useUploadcare hook — it returns the upload percentage and status. Example:

import { useUploadcare } from '@uploadcare/react-uploader' function UploadProgress() { const { progress } = useUploadcare({ pubkey: import.meta.env.VITE_UPLOADCARE_PUBLIC_KEY }) return <div>Progress: {progress}%</div> } 

Available Image Transformations

The key feature: handle images without backend code. Build operation chains via URL.

Example URL: https://ucarecdn.com/{uuid}/-/scale_crop/300x300/center/-/format/webp/-/quality/smart/.

How to Secure Uploads on the Backend

Client-side upload means the backend receives only the UUID. You need to verify the file actually exists and belongs to your project, check mime type and size. Example in Laravel:

public function store(Request $request): JsonResponse { $request->validate([ 'file_uuid' => ['required', 'string', 'regex:/^[a-f0-9-]{36}$/'], ]); $uuid = $request->input('file_uuid'); // Verify via 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' => 'File not found'], 422); } $fileInfo = $response->json(); // Check mime type if (!str_starts_with($fileInfo['mime_type'], 'image/')) { return response()->json(['error' => 'Only images are allowed'], 422); } // Store UUID in database $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); } 

For Node.js, similar verification is done with axios and the authorization header. We also connect verification via the Uploadcare REST API (method /files/{uuid}/). This protects against fake UUIDs and unwanted formats.

Timeline for Implementation

Basic integration with widget and backend validation takes 0.5 to 1 day. If custom UI, additional handlers, or migration of existing files is required, the timeline is defined individually. Integration quickly pays for itself through reduced server costs.

What's Included in the Integration Service

• Installation and configuration of the Uploadcare widget (React, Vue, or Angular).
• Setup of CDN transformations as per project requirements.
• Development of backend UUID validation (Laravel, Node.js, Django).
• Integration with existing storage (S3, local disks).
• Documentation for usage and support.
• Team training (1 hour online).
• 3-month warranty on the integration.

Order a turnkey Uploadcare integration — we will audit, set up the widget and backend. Get a consultation on configuring Uploadcare for your project. Contact us to discuss your tasks.