When will you use this?

Reach for data fetching and Server Actions when pages need database content or form submissions.

• Enrollments, quiz scores, and course progress load from the server — often with Server Actions.
• Forms that enroll a student in a course use Server Actions instead of a separate REST call.

Real-world: Flipkart-style catalog

The E-commerce team building Flipkart-style catalog uses File Upload to let instructors upload thumbnails and assignment files safely. shoppers never see the TypeScript files — they just get a fast, reliable search, filters, and fast product listing pages.

Production-style code

'use server';

import { writeFile } from 'fs/promises';
import path from 'path';

export async function uploadThumbnail(formData: FormData) {
  const file = formData.get('file');
  if (!(file instanceof File) || file.size > 2_000_000) {
    return { error: 'File must be under 2MB' };
  }

  const bytes = await file.arrayBuffer();
  const buffer = Buffer.from(bytes);
  const safeName = `${Date.now()}-${file.name.replace(/[^a-z0-9.-]/gi, '')}`;
  const dest = path.join(process.cwd(), 'public', 'uploads', safeName);
  await writeFile(dest, buffer);
  return { url: `/uploads/${safeName}` };
}

What happens in production: In Flipkart-style catalog, getting File Upload right means shoppers trust the search, filters, and fast product listing pages every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

'use server';

import { writeFile } from 'fs/promises';
import path from 'path';

export async function uploadThumbnail(formData: FormData) {
  const file = formData.get('file');
  if (!(file instanceof File) || file.size > 2_000_000) {
    return { error: 'File must be under 2MB' };
  }

  const bytes = await file.arrayBuffer();
  const buffer = Buffer.from(bytes);
  const safeName = `${Date.now()}-${file.name.replace(/[^a-z0-9.-]/gi, '')}`;
  const dest = path.join(process.cwd(), 'public', 'uploads', safeName);
  await writeFile(dest, buffer);
  return { url: `/uploads/${safeName}` };
}

Line-by-line walkthrough

How it works (big picture)

• File from FormData is a Web File API object.
• Size check blocks huge uploads.
• Sanitize filename before save.
• Production should use object storage, not public/uploads.

Do this on your computer

1. Create form with enctype="multipart/form-data"
2. input type="file" name="file"
3. Server Action saves with size limit
4. Plan move to S3 before production
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Change the API URL or course id and see how the page data changes.
• Use npm run dev while editing File Upload — the page hot-reloads on save.

Remember

Validate size and type server-side. Use FormData File in Server Actions. Use cloud storage in production.

Common questions