Storing Uploaded Files and Serving Them in Express

Uploading files is one thing.

But what happens after upload is where most beginners get confused:

Where does the file go?
How do we access it later?
How does Express serve it?

Let’s break this down step by step.

Where Uploaded Files Are Stored

When you upload a file using something like multer, the file doesn’t magically stay in memory.

It is stored somewhere — usually on your server.

Common approach

const storage = multer.diskStorage({
  destination:"uploads/",
  filename: (req,file,cb) => {
cb(null,Date.now()+"-"+file.originalname);
  }
});

What this does

destination → folder where files go
filename → how file is named

So if a user uploads image.png, it might become:

uploads/1713950000000-image.png

Key point

Files are stored on your server filesystem
You control where and how

Local Storage vs External Storage

This is an important concept.

1. Local Storage (on your server)

Files are saved in your project folder:

project/
 ├── uploads/
 │    ├── file1.jpg
 │    ├── file2.png

Pros

Simple to implement
No extra services needed

Cons

Not scalable
Files lost if server restarts or crashes
Not suitable for multiple servers

2. External Storage (Cloud)

Files are stored outside your server.

Examples:

Amazon S3
Cloudinary
Google Cloud Storage

Pros

Highly scalable
Reliable and persistent
CDN support (faster delivery)

Cons

Slightly complex setup
Cost involved

Simple understanding

Local = “files live with your server”
External = “files live somewhere else”

Serving Static Files in Express

Now you have files stored.

But how do users access them?

By default, Express does NOT expose your folders.

You have to explicitly allow it.

Solution: static middleware

import express from "express";

const app = express();

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

What this means

You are telling Express:

“Anything inside uploads/ can be accessed via /uploads URL”

Accessing Uploaded Files via URL

Now suppose your file is stored as:

uploads/1713950000000-image.png

With static setup:

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

You can access it like:

http://localhost:3000/uploads/1713950000000-image.png

Key point

File path → becomes URL
No extra route needed

Security Considerations for Uploads

This is where most people mess up.

Uploading files without validation is risky.

1. File Type Validation

Never trust file extensions.

Use mimetype:

const fileFilter= (req,file,cb) => {
const allowed= ["image/jpeg","image/png"];

if (allowed.includes(file.mimetype)) {
cb(null,true);
  }else {
cb(newError("Invalid file type"));
  }
};

2. File Size Limit

Prevent huge uploads:

limits: {fileSize:5*1024*1024 }// 5MB

3. Avoid Executable Files

Never allow:

.js
.exe
.sh

These can be dangerous if executed.

4. Rename Files

Don’t trust original names:

cb(null,Date.now()+"-"+file.originalname);

Prevents:

overwriting files
malicious filenames

5. Store Outside Root (Advanced)

Instead of:

public/uploads

Use:

uploads/

And expose only via controlled routes if needed.

6. Authentication (Important)

Not all files should be public.

For sensitive files:

Don’t use express.static
Create protected routes

Final Understanding

Upload → file saved on server or cloud
Storage → local or external
Serving → using express.static
Access → via URL
Security → must not be ignored

Simple Mental Model

Upload = “file comes in”
Storage = “file is saved somewhere”
Static serving = “file becomes accessible via URL”

Storing Uploaded Files and Serving Them in Express

Comments

More from this blog

How Instagram Stores Reels, Photos, and Drafts Behind the Scenes

How WhatsApp Works Without Internet: Offline Messaging and Sync Explained

Expo Router vs React Navigation - Which One Should You Use in 2026?

How Instagram, WhatsApp, Uber & Netflix Would Be Built Today Using Expo Router

How React Virtual DOM works under the hood

Where Uploaded Files Are Stored

Common approach

What this does

Key point

Local Storage vs External Storage

1. Local Storage (on your server)

Pros

Cons

2. External Storage (Cloud)

Pros

Cons

Simple understanding

Serving Static Files in Express

Solution: static middleware

What this means

Accessing Uploaded Files via URL

Key point

Security Considerations for Uploads

1. File Type Validation

2. File Size Limit

3. Avoid Executable Files

4. Rename Files

5. Store Outside Root (Advanced)

6. Authentication (Important)

Final Understanding

Simple Mental Model

Command Palette

Comments

More from this blog

Where Uploaded Files Are Stored

Common approach

What this does

Key point

Local Storage vs External Storage

1. Local Storage (on your server)

Pros

Cons

2. External Storage (Cloud)

Pros

Cons

Simple understanding

Serving Static Files in Express

Solution: static middleware

What this means

Accessing Uploaded Files via URL

Key point

Security Considerations for Uploads

1. File Type Validation

2. File Size Limit

3. Avoid Executable Files

4. Rename Files

5. Store Outside Root (Advanced)

6. Authentication (Important)

Final Understanding

Simple Mental Model