Imagine an e-commerce user trying to upload 50 product photos—the browser hangs, files send one by one, and no progress shows. The customer leaves for a competitor. We solve this with multi-upload featuring parallel sending and clear progress. This system is called bulk upload—mass file upload to a site. Our engineers have 10+ years designing such systems, from simple forms to high-load media libraries.
Why is it complex?
Poor implementation leads to timeouts, duplicates, and data loss. Common issues: lack of client-side validation (user uploads 2 GB video), N+1 server requests, UI blocking during upload, and vulnerabilities (PHP shell uploads). We use proven patterns: a queue with parallel request limit (concurrency 3), retries on errors, and two-level validation.
Client-side and Server-side Validation
On the client we check size and MIME type via accept and max attributes—but that's only the first line. Server-side validation is mandatory: MIME check by content, malicious code scanning, file count limit. In one project we found that a third-party React upload component allowed files with double extensions—after implementing server-side validation, attacks stopped.
How does the React Upload Component Work?
At its core is a file queue with individual status for each. The multiple attribute on input[type=file] allows selecting multiple files; the accept filter is a first line but not security. Client validation checks size (max 10 MB) and count. Parallel upload with a limit: three files simultaneously, others wait. Per-file progress is tracked via XMLHttpRequest. Here is an example component:
// components/BulkUpload.tsx
import { useRef, useState, useCallback } from 'react'
interface UploadFile {
id: string
file: File
status: 'pending' | 'uploading' | 'done' | 'error'
progress: number
error?: string
url?: string // URL after upload
}
interface BulkUploadProps {
accept?: string
maxFiles?: number
maxSizeBytes?: number
onUploadComplete?: (urls: string[]) => void
}
export function BulkUpload({
accept = 'image/*',
maxFiles = 10,
maxSizeBytes = 10 * 1024 * 1024, // 10 MB
onUploadComplete,
}: BulkUploadProps) {
const inputRef = useRef<HTMLInputElement>(null)
const [files, setFiles] = useState<UploadFile[]>([])
const addFiles = useCallback((incoming: FileList | File[]) => {
const arr = Array.from(incoming)
const validated = arr
.filter(f => {
if (f.size > maxSizeBytes) {
alert(`${f.name}: file too large (max ${maxSizeBytes / 1024 / 1024} MB)`)
return false
}
return true
})
.slice(0, maxFiles - files.length)
setFiles(prev => [
...prev,
...validated.map(file => ({
id: crypto.randomUUID(),
file,
status: 'pending' as const,
progress: 0,
})),
])
}, [files.length, maxFiles, maxSizeBytes])
const uploadFile = useCallback(async (uploadFile: UploadFile) => {
const formData = new FormData()
formData.append('file', uploadFile.file)
setFiles(prev => prev.map(f =>
f.id === uploadFile.id ? { ...f, status: 'uploading' } : f
))
try {
await new Promise<void>((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('POST', '/api/upload')
xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector<HTMLMetaElement>('meta[name=csrf-token]')?.content ?? '')
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const progress = Math.round((e.loaded / e.total) * 100)
setFiles(prev => prev.map(f =>
f.id === uploadFile.id ? { ...f, progress } : f
))
}
}
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
const { url } = JSON.parse(xhr.responseText)
setFiles(prev => prev.map(f =>
f.id === uploadFile.id ? { ...f, status: 'done', progress: 100, url } : f
))
resolve()
} else {
reject(new Error(`HTTP ${xhr.status}`))
}
}
xhr.onerror = () => reject(new Error('Network error'))
xhr.send(formData)
})
} catch (e) {
setFiles(prev => prev.map(f =>
f.id === uploadFile.id
? { ...f, status: 'error', error: (e as Error).message }
: f
))
}
}, [])
const uploadAll = useCallback(async () => {
const pending = files.filter(f => f.status === 'pending')
// Parallel, but max 3 at a time
const CONCURRENCY = 3
for (let i = 0; i < pending.length; i += CONCURRENCY) {
await Promise.all(pending.slice(i, i + CONCURRENCY).map(uploadFile))
}
const urls = files.filter(f => f.status === 'done' && f.url).map(f => f.url!)
onUploadComplete?.(urls)
}, [files, uploadFile, onUploadComplete])
const removeFile = (id: string) => {
setFiles(prev => prev.filter(f => f.id !== id))
}
return (
<div>
<button onClick={() => inputRef.current?.click()}>
Choose files
</button>
<input
ref={inputRef}
type="file"
multiple
accept={accept}
className="hidden"
onChange={e => e.target.files && addFiles(e.target.files)}
/>
{files.length > 0 && (
<ul className="mt-4 space-y-2">
{files.map(f => (
<li key={f.id} className="flex items-center gap-3">
<span className="truncate flex-1">{f.file.name}</span>
<span className="text-sm text-muted">
{(f.file.size / 1024).toFixed(1)} KB
</span>
{f.status === 'uploading' && (
<div className="w-24 bg-gray-200 rounded-full h-2">
<div
className="bg-blue-500 h-2 rounded-full transition-all"
style={{ width: `${f.progress}%` }}
/>
</div>
)}
{f.status === 'done' && <span className="text-green-600">✓</span>}
{f.status === 'error' && (
<span className="text-red-600 text-sm">{f.error}</span>
)}
<button
onClick={() => removeFile(f.id)}
disabled={f.status === 'uploading'}
aria-label={`Remove ${f.file.name}`}
>
✕
</button>
</li>
))}
</ul>
)}
{files.some(f => f.status === 'pending') && (
<button onClick={uploadAll} className="mt-4 btn-primary">
Upload {files.filter(f => f.status === 'pending').length} files
</button>
)}
</div>
)
}
Why are Presigned URLs 5x Faster?
When uploading through the server (multipart), each file passes through PHP/Laravel—with 50 files at 10 MB each, the server becomes a bottleneck. Presigned URLs allow the client to upload directly to S3, bypassing the server. This reduces load and speeds up uploads up to 5x. In one project, the client saved 2500 BYN monthly on traffic using this technique.
| Characteristic | Multipart via Server | Presigned URL (Direct Upload) |
|---|---|---|
| Server load | High (100% traffic) | Minimal (only URL generation) |
| Throughput | Limited by server | Only limited by client's channel |
| Upload 50 files of 10 MB | ~2 minutes | ~25 seconds |
| Security | Requires server validation | Client + server validation |
How to Implement Presigned URLs on the Backend?
- Client requests a presigned URL, providing filename, MIME type, and size.
- Server generates a time-limited URL (15 minutes) and returns it.
- Client uploads file directly to S3 via PUT request.
- After upload, post-processing can be done (e.g., conversion to WebP).
Generating presigned URLs is a few lines in Laravel:
// Генерация presigned URL
public function presign(Request $request): JsonResponse
{
$request->validate([
'filename' => 'required|string|max:255',
'mime_type' => 'required|string|in:image/jpeg,image/png,image/webp,application/pdf',
'size' => 'required|integer|max:' . 10 * 1024 * 1024,
]);
$ext = pathinfo($request->filename, PATHINFO_EXTENSION);
$key = 'uploads/' . date('Y/m') . '/' . Str::uuid() . '.' . $ext;
$client = Storage::disk('s3')->getClient();
$cmd = $client->getCommand('PutObject', [
'Bucket' => config('filesystems.disks.s3.bucket'),
'Key' => $key,
'ContentType' => $request->mime_type,
'ACL' => 'private',
]);
$presignedUrl = (string) $client->createPresignedRequest($cmd, '+15 minutes')->getUri();
return response()->json([
'upload_url' => $presignedUrl,
'public_url' => Storage::url($key),
'key' => $key,
]);
}
On the frontend, uploading to S3 looks like this:
// Фронтенд: загрузка напрямую в S3
async function uploadToS3(file: File): Promise<string> {
// 1. Получить presigned URL от нашего сервера
const { upload_url, public_url } = await fetch('/api/upload/presign', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
filename: file.name,
mime_type: file.type,
size: file.size,
}),
}).then(r => r.json())
// 2. Загрузить файл напрямую в S3
await fetch(upload_url, {
method: 'PUT',
body: file,
headers: { 'Content-Type': file.type },
})
return public_url
}
How to Set Up a Queue with Retry Logic?
For resilience to network errors, we implement retry logic. Each file can be retried up to 3 times with exponential backoff. This saves user time and reduces failed uploads. We use Laravel Queues with retry settings: up to 3 attempts with delays of 1, 5, 15 seconds.
Retry Logic Details
In the React component, each failed upload sets the file status to 'error'. The user can click a retry button. On the server side, we can configure a job queue for post-processing—if a job fails, it's automatically pushed back. This handles temporary failures from S3 or network.
What Does the Turnkey Implementation Include?
- React component with queue, progress, and cancel support.
- Server-side API on Laravel 11 with validation, image processing (WebP), and S3 integration.
- Automatic presigned URL generation for direct upload.
- Error handling with retry (up to 3 times).
- API and component documentation.
- 10+ years of experience and 50+ file upload integration projects guarantee stability.
Timeline
| Stage | Duration |
|---|---|
| React component + queue + progress | 2 days |
| Server endpoint on Laravel | 1 day |
| S3 presigned URL integration | 1 day |
| WebP conversion, throttle, retry | 1 day |
| Total (turnkey) | 2–4 days |
Contact us for a free assessment of your project. Order a turnkey implementation and get a stable multi-upload system in 2–4 days. You can also get a consultation for your project.