Where Uploaded Files Are Stored

When users upload files, the server stores them somewhere before they can be accessed later.

Common examples:

• Profile pictures

• PDFs

• Videos

• Documents

Basic Upload Flow

Local Storage vs External Storage

Local Storage

Files are stored directly on the server filesystem.

Example:

project/
│
├── uploads/
│   ├── image1.jpg
│   ├── resume.pdf

Benefits

• Easy setup

• Good for small projects

• Fast local development

Drawbacks

• Files lost if server resets

• Harder scaling

• Not ideal for multiple servers

External Storage

Files are stored outside the application server.

Examples:

• AWS S3

• Cloudinary

• Google Cloud Storage

Benefits

• Better scalability

• CDN support

• Safer backups

• Better for production systems

Folder-Based Storage Structure

Uploading Files in Express

Most Express apps use:

multer

for file uploads.

Install Multer

npm install multer

Basic Upload Setup

const express = require("express");
const multer = require("multer");

const app = express();

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 });

app.post("/upload", upload.single("image"), (req, res) => {
  res.json({
    message: "File uploaded",
    file: req.file.filename
  });
});

app.listen(3000);

What This Does

Serving Static Files in Express

Uploaded files are not automatically public.

You must expose them using static file serving.

Static File Serving

app.use("/uploads", express.static("uploads"));

What This Means

Files inside:

uploads/

become accessible via URL.

Example

Stored file:

uploads/photo.jpg

Accessible URL:

http://localhost:3000/uploads/photo.jpg

Static File Serving Flow

Accessing Uploaded Files Via URL

After upload:

res.json({
  imageUrl: `/uploads/${req.file.filename}`
});

Frontend can use:

Common Upload Folder Structure

project/
│
├── uploads/
│   ├── avatars/
│   ├── products/
│   ├── documents/
│
├── server.js

Security Considerations

File uploads are dangerous if not handled properly.

1. Validate File Types

Only allow safe file formats.

Example

fileFilter: (req, file, cb) => {
  if (file.mimetype.startsWith("image/")) {
    cb(null, true);
  } else {
    cb(new Error("Only images allowed"));
  }
}

2. Limit File Size

Prevent huge uploads.

Example

limits: {
  fileSize: 2 * 1024 * 1024
}

2 MB limit.

3. Rename Uploaded Files

Avoid filename conflicts.

Incorrect:

photo.jpg

Better:

174689213-photo.jpg

4. Never Trust User File Names

Attackers may upload dangerous filenames.

Always sanitize or rename files.

5. Store Sensitive Files Privately

Do not expose:

• Admin documents

• Private user files

• Internal backups

using express.static().

Local Storage vs External Storage

Real-World Usage

Practice Example

const express = require("express");
const multer = require("multer");

const app = express();

const upload = multer({
  dest: "uploads/"
});

app.use("/uploads", express.static("uploads"));

app.post("/upload", upload.single("image"), (req, res) => {
  res.json({
    file: req.file.filename,
    url: `/uploads/${req.file.filename}`
  });
});

app.listen(3000);

Key Takeaways

For beginner projects:

• Local uploads are enough

• multer is the standard solution

• express.static() serves files publicly

For production systems:

• Use external object storage

• Validate uploads carefully

• Never trust uploaded files blindly