File Upload in MERN Stack

In this blog, we will delve into the concept of file uploads, which is essential for any web application built using JavaScript. Specifically, in the MERN stack, I have used the multer package to store files from the frontend to the backend without any compression.

Using Multer

Multer is an npm package used for handling file uploads (multipart/form-data). It is a middleware that integrates seamlessly with Express.js applications.

Steps for File Upload Using Multer

1. Install Multer Package:
First, install the multer package via npm:

npm install multer

2. Upload Button:
Instead of forms, I have handled the submit request through states in React.js:

<div>
  <input type="file" onChange={(event) => setImage(event.target.files[0])} />
</div>

Handled through forms:

<form onSubmit={handleSubmit} enctype="multipart/form-data">
  <input type="file" />
</form>

3. Handle Submit Function:
Here is the handleSubmit function in React.js:

const [image, setImage] = useState(null);

const handleSubmit = async (event) => {
  event.preventDefault();
  try {
    const formData = new FormData();
    // image is the state which has image details
    formData.append('file', image);
    var name;
    await axios.post("http://localhost:4100/upload", formData, {
      withCredentials: true,
    })
    .then((response) => {
      toast.success("Image uploaded successfully");
      name = response.data;
    });
  } catch (error) {
    console.log(error);
  }
};

Backend Part

4. Multer Setup:
Create a folder named 'uploads/' on the server-side. Add the following code to app.js. Refer to your project's folder structure for a complete MERN stack application setup.

// Import multer
const multer = require('multer');
const path = require('path');

// Configure multer storage
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});
const upload = multer({ storage: storage });

5. Upload API:
Note: The form data should have the key name 'file' in order to access the file inside the form data.

app.post('/upload', upload.single('file'), (req, res) => {
  try {
    res.json({ message: 'File uploaded successfully', name: req.file.filename });
  } catch (error) {
    console.log(error);
  }
});

6. Serve Static Files

Once the files are uploaded to the backend, they should be accessible from the browser to render on the frontend. To serve static files, use the built-in middleware function in Express.js: express.static().

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

For example, if the link is "http://localhost:4100/uploads/example.jpg", in the /uploads API, it strips the file name alone and searches for it in the 'uploads' directory.

7. Optional: ES Modules
If you use CommonJS modules, the above code will work. If you are using ES modules, __dirname is not present by default. You need to create an equivalent for ES modules.

import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

---

Feel free to reach out if you have any questions or need further assistance. 😊📁✨