How File Uploads Work in a MERN Application

Every MERN Blog needs file uploads — profile avatars, post cover images, perhaps inline images in post bodies. Uploading a file is fundamentally different from submitting JSON: the browser must encode the binary file data alongside any text fields using the multipart/form-data content type, and the Express server needs dedicated middleware to parse and store that binary data before the route handler runs. Understanding this flow end-to-end — how the browser packages the file, how Multer receives it, where it is stored, and how React displays the result — is the foundation for every file upload feature in the MERN Blog.

The File Upload Flow in MERN #

React (browser):
  1. User selects a file using an <input type="file">
  2. React reads the File object (name, size, type, lastModified)
  3. React creates a FormData object and appends the file + any other fields
  4. Axios sends a POST request with Content-Type: multipart/form-data
        │
        ▼
Express (server):
  5. Request arrives with multipart body
  6. Multer middleware parses the multipart body
  7. Multer stores the file (disk or cloud storage)
  8. Multer attaches file metadata to req.file (or req.files for multiple)
  9. Route handler reads req.file — saves the URL to MongoDB
  10. Handler returns the file URL in the JSON response
        │
        ▼
React (browser):
  11. Axios receives the response with the file URL
  12. React updates state — displays the image immediately

The multipart/form-data Request Structure #

HTTP POST /api/upload
Content-Type: multipart/form-data; boundary=----FormBoundaryABC123

------FormBoundaryABC123
Content-Disposition: form-data; name="avatar"; filename="profile.jpg"
Content-Type: image/jpeg

[binary JPEG data here — thousands of bytes]
------FormBoundaryABC123
Content-Disposition: form-data; name="userId"

64a1f2b3c8e4d5f6a7b8c9d0
------FormBoundaryABC123--

Each "part" has its own headers and content.
Multer parses these parts and gives Express access to:
  req.file  → { fieldname, originalname, mimetype, size, path, filename }
  req.body  → { userId: '64a1f...' }  (other text fields)

What Multer Gives You #

Common Mistakes #

Mistake 1 — Setting Content-Type manually for file uploads #

❌ Wrong — manually setting Content-Type breaks the boundary string:

await axios.post('/api/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }, // breaks boundary!
});

✅ Correct — omit Content-Type and let Axios set it automatically:

await axios.post('/api/upload', formData); // ✓ Axios sets the correct boundary

Mistake 2 — Sending a file as JSON #

❌ Wrong — trying to base64-encode the file and send it in a JSON body:

const base64 = await readFileAsBase64(file);
await axios.post('/api/upload', { avatar: base64 }); // 33% size overhead, not standard

✅ Correct — use FormData for binary file uploads:

const fd = new FormData();
fd.append('avatar', file);
await axios.post('/api/upload', fd); // ✓ multipart/form-data

Mistake 3 — Serving uploaded files from the wrong URL #

❌ Wrong — returning a server-local path to React:

res.json({ url: req.file.path }); // 'uploads/avatar-123.jpg' — not accessible from browser!

✅ Correct — construct a full public URL:

const url = `${process.env.SERVER_URL}/uploads/${req.file.filename}`;
res.json({ url }); // 'https://api.mernblog.com/uploads/avatar-123.jpg' ✓

Quick Reference #