File Uploads and Storage Handling

# CHAPTER 17

File Uploads and Storage Handling #

1. Introduction #

2. Learning Objectives #

• Install and configure the multer middleware.

• Handle single and multiple file uploads.

• Implement security filters to restrict file types and file sizes.

• Store file paths dynamically in a database.

3. Beginner-Friendly Explanation #

4. Step 1: Installing and Configuring Multer #

Install:

npm install multer

Creating the Multer Configuration (middleware/upload.js):

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

// 1. Configure where the file goes and what to name it
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        // Save files to our public uploads folder
        cb(null, 'public/uploads/');
    },
    filename: (req, file, cb) => {
        // Create a unique, hack-proof filename: timestamp + random number + original extension
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        cb(null, uniqueSuffix + path.extname(file.originalname));
    }
});

// 2. Filter out bad files (Only accept Images)
const fileFilter = (req, file, cb) => {
    if (file.mimetype.startsWith('image/')) {
        cb(null, true);
    } else {
        cb(new Error('Invalid file type! Please upload only images.'), false);
    }
};

// 3. Initialize Multer
const upload = multer({ 
    storage: storage,
    limits: { fileSize: 1024 * 1024 * 5 }, // 5 MB size limit
    fileFilter: fileFilter
});

module.exports = upload;

5. Step 2: Handling the Upload Route #

routes/userRoutes.js:

const express = require('express');
const router = express.Router();
const upload = require('../middleware/upload');

// The 'upload.single('avatar')' middleware intercepts the file!
router.post('/upload-profile-pic', upload.single('avatar'), async (req, res) => {
    try {
        // Multer automatically processes the file and attaches it to 'req.file'
        if (!req.file) {
            return res.status(400).json({ error: "Please upload a file" });
        }

        // The path where the image was physically saved on the hard drive
        const imagePath = `/uploads/${req.file.filename}`;

        // Example: Save this text path to the database
        // await User.findByIdAndUpdate(req.user.id, { profilePic: imagePath });

        res.status(200).json({ 
            status: "success", 
            message: "File uploaded successfully!",
            url: imagePath 
        });

    } catch (err) {
        res.status(500).json({ error: err.message });
    }
});

module.exports = router;

6. Step 3: Handling Multiple Files #

// Accept up to 5 files under the field name 'gallery'
router.post('/upload-album', upload.array('gallery', 5), (req, res) => {
    // Multer attaches an array of files to 'req.files' (Notice the 's'!)
    const filePaths = req.files.map(file => `/uploads/${file.filename}`);
    
    res.json({ urls: filePaths });
});

7. Backend Workflow: Testing Uploads in Postman #

1. 1. Open Postman. Set to POST.

1. 2. Go to the Body tab.

1. 3. Select form-data (NOT raw JSON).

1. 4. In the Key column, type avatar (this must match the string in upload.single('avatar')).

1. 5. CRITICAL: Hover over the Key cell, and a hidden dropdown will appear. Change it from "Text" to "File".

1. 6. In the Value column, click "Select Files" and choose an image from your computer. Click Send.

8. Cloud Storage vs Local Storage #

9. Best Practices #

• Security Check - Filenames: NEVER trust the original filename the user uploaded. A hacker might upload a file named ../../../etc/passwd. Multer's diskStorage engine allows you to generate a secure, randomized filename (as seen in Step 1) ensuring hackers cannot overwrite critical server files.

10. Common Mistakes #

• Mixing JSON and Files: If a route expects multipart/form-data for an upload, and the frontend accidentally sends pure JSON, req.file will be undefined. Vice-versa, if you send form-data to a standard route relying solely on express.json(), req.body will be completely blank! The parser must match the payload type.

11. Exercises #

1. 1. Explain the architectural reasoning behind saving a *text string* (the file path) in the MongoDB database, rather than saving the actual image file itself inside the database.

12. Coding Challenges #

• Challenge: Modify the Multer configuration in Step 1 so that it accepts .pdf files instead of images, and changes the upload size limit to 10 MB.

13. MCQs with Answers #

14. Interview Questions #

• Q: Explain the purpose of the multer middleware in an Express API. Why can't the standard express.json() middleware process an image upload?

• Q: What are the security risks associated with allowing users to upload files to your server? How does our Multer configuration mitigate these risks?

15. FAQs #

16. Summary #

17. Next Chapter Recommendation #