MERN 스택 학습 58일차

Hello Dev Community! 👋

It is officially Day 58 of my continuous daily sprint toward mastering full-stack software engineering! Yesterday, I implemented password encryption using cryptographic bcrypt algorithms. Today, I expanded my backend’s capabilities into binary asset management inside Prashant Sir’s backend masterclass track: Implementing Custom Image Uploads using Multer Middleware!

Standard form parsers can only read text-based inputs. To allow users to upload real item photos, property covers, or profile images, your backend must be engineered to process stream encodings and write static assets safely to the server disk.

🧠 Key Learnings From Day 58 (Multer Storage Engines)

Configuring image pipelines effectively requires transitioning to multipart encodings and controlling disk naming conventions:

1. Parsing multipart/form-data Encodings

I learned that to pass file streams from the client layout to the server, HTML forms must be explicitly tagged with enctype="multipart/form-data". Since regular body-parsers ignore these blocks, I integrated multer to intercept the binary streams cleanly.

2. Custom Disk Storage Configuration (multer.diskStorage)

Instead of letting files drop into random temp directories with missing extensions, I engineered a structured disk engine under my configuration layer. This allows me to isolate storage paths dynamically and rename files using unique timestamp tokens to guarantee zero file overwrite conflicts:

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

// Configuring dynamic storage engines for incoming image buffers
const fileStorage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'public/images'); // Directing items straight to the asset vault
    },
    filename: (req, file, cb) => {
        // Appending unique timestamps alongside original names to prevent conflicts
        cb(null, new Date().toISOString().replace(/:/g, '-') + '-' + file.originalname);
    }
});

const fileFilter = (req, file, cb) => {
    if (file.mimetype === 'image/png' || file.mimetype === 'image/jpg' || file.mimetype === 'image/jpeg') {
        cb(null, true); // Accepting secure image blueprints only
    } else {
        cb(null, false);
    }
};

// Injecting the customized middleware bundle into the root server execution
// app.use(multer({ storage: fileStorage, fileFilter: fileFilter }).single('photoUrl'));

Enter fullscreen mode Exit fullscreen mode