How to Handle File Uploads in MERN Stack with Multer

File uploads are an essential part of many full stack applications — whether you're building a profile picture uploader, document management tool, or product catalog. In this tutorial, we'll walk through how to handle file uploads in a MERN (MongoDB, Express, React, Node.js) stack project using Multer.

If you're a junior developer or a self-taught coder, learning how to upload files will help you build more dynamic, interactive applications. The process may seem tricky at first, but once you understand the flow, you'll be able to implement it confidently in any project.

What is Multer?

Multer is a Node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It works seamlessly with Express and allows you to store files either locally or on cloud storage services like AWS S3.

Why File Uploads Matter in MERN Stack

• User Experience: Profile images, cover photos, and custom uploads improve personalization.
• Functionality: Many applications rely on documents, spreadsheets, or multimedia files.
• Data Management: Files can be linked with user accounts or database entries for better organization.

Step-by-Step Implementation

1. Backend Setup with Express and Multer

npm install express multer

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();

// Configure storage
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // Folder to save uploaded files
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname)); // Unique file name
  }
});

const upload = multer({ storage });

// Route to handle file upload
app.post('/upload', upload.single('file'), (req, res) => {
  res.json({ message: 'File uploaded successfully', file: req.file });
});

app.listen(5000, () => console.log('Server started on port 5000'));

2. Frontend Setup with React

import React, { useState } from 'react';
import axios from 'axios';

export default function FileUpload() {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleUpload = async () => {
    const formData = new FormData();
    formData.append('file', file);

    await axios.post('/upload', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });
    alert('File uploaded successfully');
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
}

Testing Your File Upload

Run your backend server and frontend React app. Select a file and click upload — it should be saved in your uploads/ directory. From there, you can store the file path in MongoDB.

💡 You might also want to read my guide on Authentication Best Practices in MERN Stack Projects to secure your upload endpoints.

Related Tools & Resources

• Multer GitHub Repository
• React Official Docs
• Express.js Official Docs

Conclusion

Handling file uploads in MERN stack projects is straightforward once you understand the process. By combining Express, Multer, and React, you can easily let users upload images, documents, or any other files.

Now that you know how it works, try implementing it in your next project — and don’t forget to secure your uploads. Comment your thoughts below or share what you're building!

💖

Enjoyed the Post?

If my blog helped you, please consider supporting me!

Support Me 💖