Chapters of From Frontend to Full-Stack Backend

Week 3 - Interview-এ সবচেয়ে বেশি জিজ্ঞেস করা TopicsChapter 18 of 283 min read

File upload - multer, validation and the S3 presigned URL idea

Multipart requests, size and type validation, cloud storage instead of disk, presigned URLs

The menu needs food photos - meaning users will upload images. From the frontend side that is just an input field, but on the backend it is a different world. Files do not travel with normal JSON requests - files come as multipart form-data, and handling that needs a separate arrangement.

Multer - Express's file receiver

import multer from "multer";

const upload = multer({
  dest: "uploads/",
  limits: { fileSize: 2 * 1024 * 1024 }, // at most 2 MB
  fileFilter: (req, file, cb) => {
    if (!file.mimetype.startsWith("image/")) {
      return cb(new Error("Only images can be uploaded"));
    }
    cb(null, true);
  },
});

app.post("/menu", upload.single("photo"), createMenuItem);

Two barriers here are mandatory: a size limit and a type check. Otherwise someone can fill the server by uploading a 2 GB file, or slip a harmful file in under a photo's name. Do not check type only by looking at the end of the filename (extension) - look at the real type inside (mimetype), and if possible test whether the file really is an image.

In a real project, files do not stay on the server

Keeping files on your own server's disk works for a small project, but when the server changes or there are multiple servers, the trouble of losing files and keeping them in sync starts. The usual solution: files live in cloud storage (like S3), and the database holds only their URL. An even better shape for uploading is the presigned URL: the server gives a short-lived signed URL, and the browser uploads the file directly to storage - the heavy file never even touches your server. The server only gives permission, it does not carry.

Another rule: never save a user-given file under the name it came with - if two files arrive with the same name, one will delete the other, and strange characters in a name can cause path trouble. Build a unique name yourself (time + a random part), and if you need the original name, keep it separately in the database.

The mistake everyone makes

Keeping no size limit or type check on file upload - that is not just a bug, it is a direct security hole. Another mistake: keeping uploaded files in a folder from which they can be executed - if a script slips in behind an image, the server can fall into someone's hands.

Today's practice

Add image upload to the menu-item creation endpoint with multer - a 2 MB limit and image-only type mandatory. Try uploading a big file and a PDF and check whether both get blocked properly.

How to say it in an interview

For file upload I use multer with a strict size limit and type validation, and I generate file names myself. In production I do not keep files on the server's disk - I keep them in cloud storage, and for big files the client uploads directly to storage with a presigned URL, while the server only handles permission and the URL.

All chapters of From Frontend to Full-Stack Backend