Playground API
Stop Waiting for the Backend • Part 15 of 122 min read•2026-09-20

How to Test Multipart File Uploads & Cloud Storage CDN in React Without an S3 Bucket

Learn how to test multipart/form-data file uploads, progress bars, image previews, latency simulation, and bulk uploads using Playground API.

NK
Nilesh Kumar
Creator of Playground API
How to Test Multipart File Uploads & Cloud Storage CDN in React Without an S3 Bucket

How to Test Multipart File Uploads & Cloud Storage CDN in React Without an S3 Bucket

Building drag-and-drop file upload interfaces in React often hits a major hurdle during development: where do the files actually go?

Setting up AWS S3 pre-signed URLs or Cloudinary credentials just to test if your progress bar animates or if image thumbnails render properly is tedious. Worse, when you need to test edge cases—like uploading a 15MB file over a slow 3G connection, or handling unsupported file types (415 Unsupported Media Type)—mocking FormData requests in client-side code feels impossible.

Playground API provides a dedicated Multipart File Upload & Cloud Storage Sandbox (POST /api/v1/uploads and POST /api/v1/uploads/bulk) with simulated upload latency and CDN media URLs!

1. Uploading a Single File with FormData

Send standard multipart/form-data requests:

typescript
1
const formData = new FormData();
2
formData.append('file', selectedFile);
3
formData.append('folder', 'avatars');
4
5
const res = await fetch('https://playground.nileslabs.com/api/v1/uploads', {
6
method: 'POST',
7
body: formData,
8
});
9
10
const data = await res.json();
11
console.log('CDN URL:', data.url);

JSON Response:

json
1
{
2
"id": "upl_9f8a7b6c5d",
3
"filename": "avatar.png",
4
"mimetype": "image/png",
5
"size": 245912,
6
"url": "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=500&auto=format&fit=crop",
7
"thumbnail_url": "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop",
8
"folder": "avatars",
9
"created_at": "2026-09-20T00:00:00.000Z"
10
}

2. Simulating Upload Latency & Progress Bars

To test your UI progress bars and loading spinners under real-world conditions, pass the _delay query parameter or X-Simulate-Delay header:

Terminal
curl -X POST "https://playground.nileslabs.com/api/v1/uploads?_delay=2000" \
-F "file=@sample.pdf"

Playground API holds the connection and streams progress events before completing with the CDN asset metadata.

3. Bulk Uploads & Multi-File Validation

Need to test multi-file upload zones? Use POST /api/v1/uploads/bulk:

typescript
1
const formData = new FormData();
2
files.forEach((file) => formData.append('files', file));
3
4
const res = await fetch('https://playground.nileslabs.com/api/v1/uploads/bulk', {
5
method: 'POST',
6
body: formData,
7
});
8
const { items, total_files, total_size } = await res.json();

4. Live Interactive Upload Studio

Test drag-and-drop uploads, inspect CDN response URLs, and preview image thumbnails directly inside the docs:

👉 https://playground.nileslabs.com/docs/uploads

Conclusion

Say goodbye to dummy file upload mocks. Test real FormData requests, simulated bandwidth, and CDN responses with Playground API today!

Tags:#webdev#react#javascript#cloud
Series: Stop Waiting for the Backend
Part 15 of 12
Previous Article (#14)
How to Test Outgoing Webhooks and HMAC Signatures Without Setting Up an Event Server
Next Article (#16)
How to Test RBAC Permissions & 403 Forbidden States in React Without Modifying Backend Auth

Try Playground API in Your Own App

Stateful mock REST & GraphQL API with private sandbox overlays.

Quickstart GuideOpen Interactive Studio